移动WEB基础知识（下）（屏幕适配，媒体查询，网页布局等）

移动WEB基础知识（下）（屏幕适配，媒体查询，css预处理器，触屏事件，网页布局）

屏幕适配

• 经过分析我们得到，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置来进行控制，并改变浏览器默认的layout viewport的宽度。

• Viewport详解：
  viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下：
  // 通过设置属性content=”“实现，中间以逗号分隔
  // 例如
  width设置layout viewport 宽度，其取值可为数值或者device-width。
  height设置layout viewport 高度，其取值可为数值或者device-height
  initital-scale设置页面的初始缩放值，为一个数字，可以带小数。
  maximum-scale允许用户的最大缩放值，为一个数字，可以带小数。
  minimum-scale允许用户的最小缩放值，为一个数字，可以带小数。
  user-scalable是否允许用户进行缩放，值为”no”或”yes”。

  注：device-width 和 device-height就是ideal viewport的宽高。

• 控制缩放：
  

• 避免缩放：
  滚动条是 layout viewport 相对于 ideal viewport 的，所以只要设置 layout viewport 小于或等于 ideal viewport，即。(宽度要设为百分比)
• 适配方案（重点）：
  
  • 方法一：固定宽度（很少用了）
    1、设置
    2、设置内容区域大小为320px
    3、设置内容区域水平居中显示
    移动设备的屏幕尺寸虽然庞杂，但有几个主要尺寸，分别为320px、360px，这三个尺寸占了绝大部分，并且以320px最多，所以我们移动网页如果设计成320px宽，则可以保证在绝大多数设备里正常显示，此方案已经很少采用了。
  • 方法二：百分比宽度（对应高度有局限性）
    1、设置
    2、设置页面宽度为百分比
    // 测试下列属性设置为百分比
    width 参照父元素的宽度
    height 参照父元素的高度
    padding 参照父元素的宽度
    border 不支持百分比设置
    margin 参照父元素的宽度
    我们发现这种方案最容易理解，但是在设置元素高度时有非常大的局限性。
  • 方法三：使用rem布局（灵活）
    1、设置
    2、设置页面元素宽度单位为rem 或 em
    问题：rem与em的区别？
    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
  • 方法四：100%像素（淘宝针对iPhone设备采用的这种方案）
    1、设置网页宽度等于设备物理像素
    2、设置初始化缩放比例（值为1 / window.devicePixelRatio）

媒体查询（@media）

设备终端的多样化，直接导致了网页的运行环境变的越来越复杂，为了能够保证我们的网页可以适应多个终端，不得不专门为某些特定的设备设计不同的展示风格，通过媒体查询可以检测当前网页运行在什么终端，可以有机会实现网页适应不同终端的展示风格。

• 媒体类型
  将不同的终端设备划分成不同的类型，称为媒体类型。
  
• 媒体特征
  每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。
  
• 关键字
  关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
  1、and可以将多个媒体特性连接到一起，相当于“且”的意思。
  2、not 排除某个媒体类型，相当于“非”的意思，可以省略。
  3、only指定某个特定的媒体类型，可以省略。
• 引入方式
  1、link方法
  
  2、@media方法（写在CSS里）
  
• 常用特征：
  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 更简洁，适应性更强，代码更直观等诸多好处。

• 常见的CSS预处理器有：LESS、SASS、Stylus等
• LESS详解
• LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单，本质上，LESS 包含一套自定义的语法及一个解析器。
• 安装：
  1、安装Nodejs环境 Node Package Manager (验证 node -v npm -v)
  2、打开控制台（cmd），执行npm install -g less (验证 lessc -v)
  3、命令行编译 lessc path/xxx.less path/xxx.css
• 编译：
  浏览器只能识别CSS，LESS只是用来提升CSS可维护性的一个工具，所最终需要将LESS编译成CSS，然而通过命令行编译效率比较低下，一般都会借助于编辑器来完成编译，以sublime_text为例，sublime_text默认并不支持LESS的编译操作，需要安装插件实现。
  1、执行npm install -g less-plugin-clean-css（使用sublime_text才用）
  2、ctrl+shit+p打开命令面板
  3、输入install package然后回车
  4、安装 LESS、lessc、Less2Css三个插件
  5、alt+s快捷键即可实现编译
• LESS语法：
  1、变量：格式：@变量名: 值，定义完成后可以重复使用
  
  2、混合：我们可以像使用函数一样来使用CSS
  
  3、 嵌套：嵌套可以非常方便的管理我们的CSS层级关系
  
• LESS在浏览器中使用
  了解了LESS基本语法后，可以用LESS写编写CSS代码了，但是需要实时的将LESS编译成CSS浏览器才能识别，利用编辑器能够编译，但是效率相对较低。
  我们可以引入一个less.js文件，实现实时的解析，而不必每次修改都要编译，最后完成所有开发任务后，再通过编辑器编译成css文件。
  1、下载然后引入less.js
  2、引入xx.less文件，如：
  
  注意：rel属性必须指定成stylesheet/less，并且styles.less要先于less.js引入。
  必须以服务器方式访问，webstrom自带服务器功能也可以使用ghostlab调试工具的服务器。

触屏事件

• 事件类型
  touchstart: 手指触摸屏幕时触发
  touchmove: 手指在屏幕上移动时触发
  touchend: 手指离开屏幕时触发

• TouchEvent对象
  touches: 位于屏幕上的所有手指的列表
  targetTouches: 位于该元素上的所有手指的列表
  changedTouches：touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点

  注：没有对比出touches同targetTouches的差异，推荐使用targetTouches

• Touch对象
  clientX/Y 手指相对于layout viewport的水平/垂直像素距离
  pageX/Y手指相对于layout viewport的水平/垂直像素距离（含滚动）
  screenX/Y 手指相对于layout viewport的水平/垂直像素距离（含滚动）
  （未设置viewport时，screenX/Y在Webview中不正确）
  target 手指最初与屏幕接触时的元素
  移动开发通常会设置，这时这三对坐标值是完全一样的。

• click延时
  早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。用触屏事件可以解决这个问题。
• 手势封装
  
  利用触屏事件简易封装手势，主要用途是熟悉触屏事件的使用
  1、tap检测接触和离开屏幕的距离来实现
  2、drag跟踪手指移动位置，进而设置元素定位坐标
  3、swipe 判断手指滑动的方向
• zepto.js
  zeptojs为我们封装了常的触屏事件，需要touch模块支持，默认没有构建此模，我们可以自定义构建。
  1、安装Nodejs环境
  2、下载zepto.js
  3、解压缩
  4、cmd命令行进入解压缩后的目录
  5、执行npm install 命令
  6、编辑make文件，添加自定义模块并保存，如下图
  
  7、然后执行命令 npm run-script dist
  8、查看目录dist即构建好的zepto.js

网页布局

• 布局方式
  1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
  2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
  3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
  4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
• 响应式布局详解
  意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
  
  如上图所示，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。
  我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
  响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。
  一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下图所示
  
  以上是我们对常见的尺寸进行分类后的结果，下图是与之对应的媒体查询条件。