移动Web

2017-08-29 本文已影响0人 Yuann

屏幕适配

rem适配

1、设置<meta name="viewport" content="width=device-width, initial-scale=1">
1. 设置页面元素宽度单位为 rem 或 em
  注：此方案比较灵活，我们的案例将采用这种方案

关于em和rem
em 相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如 .box {font-size: 16px;} 则 1em = 16px .box {font-size: 32px;} 则 1em = 32px，0.5em = 16px

rem 相对长度单位，其参照根元素(html)字号大小例如 html {font-size: 16px;} 则 1rem = 16px html {font-size: 32px;} 则 1rem = 32px，0.5rem = 16px;
注：所有浏览器默认字号都是16px（某些安卓手机可以调置系统字号后，浏览器默认字号会受影响）

调试工具

模拟调试

现代主流浏览器均支持移动开发模拟调试，通常按F12可以调起，其使用也比较简单，可以帮我们方便快捷定位问题。

远程调试

模拟调试可以满足大部分的开发调试任务，但是由于移动设备种类繁多，环境也十分复杂，模拟调试容易出现差错，所以真机调试变的非常必要。
有两种方法可以实现真机调试：

1、将做好的网页上传至服务器或者本地搭建服务器，然后移动设备通过网络来访问。
2、借助第三方的调试工具，如weinre、debuggap、ghostlab等
真机调试必须保证移动设备同服务器间的网络是相通的。

媒体查询

设备终端的多样化，直接导致了网页的运行环境变的越来越复杂，为了能够保证我们的网页可以适应多个终端，不得不专门为某些特定的设备设计不同的展示风格，要实现这个目标的前提是必须有能力了解当前网页是运行什么终端设备，通过媒体查询可以做到这一点。

媒体类型

可以通过媒体类型对不同的设备指定不同的样式，一般我们使用screen。

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕,平板电脑,智能手机等

媒体特性

值	描述
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
min-width	定义输出设备中的页面最小可见区域宽度
min-height	定义输出设备中的页面最小可见区域高度
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
device-width	定义输出设备的屏幕可见宽度
device-height	定义输出设备的屏幕可见高度
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率

判断条件或者查询依据

值	描述
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
min-width	定义输出设备中的页面最小可见区域宽度
min-height	定义输出设备中的页面最小可见区域高度
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
device-width	定义输出设备的屏幕可见宽度
device-height	定义输出设备的屏幕可见高度
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率

关键字

1、and 可以将多个媒体特性连接到一起，相当于“且”的意思。
2、not 排除某个媒体类型，相当于“非”的意思，可以省略。
3、only指定某个特定的媒体类型，可以省略。

引入方式

1、link方法
<link href="./3-1.css" media="only screen and (max-width: 320px)">
2、@media方法（写在CSS里）

引入方式.png

常用特性

1、width / height 完全等于layout viewport，
2、max-width / max-height 小于等于layout viewport
3、min-width / min-height 大于等于layout viewport
4、device-width / device-height 完全等于ideal viewport
5、orientation: portrait | landscape 肖像/全景模式

css预处理器

CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，并且你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更简洁，适应性更强，代码更直观等诸多好处

。
常见的CSS预处理器有：LESS、SASS、Stylus等

less

安装

1、安装Nodejs环境 Node Package Manager (验证 node -v npm -v)
2、打开控制台（cmd），执行npm install -g less (验证 lessc -v)
3、执行 npm install -g less-plugin-clean-css
4、命令行编译lessc path/xxx.less path/xxx.css

编译

一般都会借助于编辑器插件来完成编译任务，以sublime_text为例

1、ctrl+shit+p打开命令面板
2、输入install package然后回车
3、安装 LESS、lessc、Less2Css三个插件
4、alt+s快捷键即可实现编译

语法

变量
格式：@变量名: 值，定义完成后可以重复使用

变量
混合
我们可以像使用函数一样来使用CSS

混合
嵌套
嵌套可以非常方便的管理我们的CSS层级关系

嵌套

浏览器中的使用

我们可以引入一个less.js文件，实现实时的解析，而不必每次修改都要编译，最后完成所有开发任务后，再通过编辑器编译成css文件。

1、下载然后引入less.js
2、引入xx.less文件，如：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
*注意：rel属性必须指定成stylesheet/less，并且styles.less要先于less.js引入 *
必须以服务器方式访问，可以放到study目录下，或者webstrom自带服务器功能