移动端与PC端的不同

• w3c标准支持情况
  总体来说，移动端对w3c的支持更好
• 交互上因为屏幕的变化而变化
  屏幕变小，意味着很多东西需要触发才能展现，最明显的就是菜单栏的变化。
• 布局上能采用更多的方式
  Flex布局，Rem(font size of the root element)计算
• 性能上考虑的点不一样
  要考虑弱网络环境，流量问题，图片的适配和压缩问题
• 移动端背后的阴影
  浏览器的性能问题，国产友商，Android的版本问题

手机设备的基本概念

• 物理像素值(physical pixel)
  也就是屏幕分辨率
• 设备独立像素(device-independent pixel)
  跟设备无关的像素值，比如前端的浏览器高。
  当前浏览器高：document.documentElement.clientWidth
  当前浏览器宽：document.documentElement.clientHeight
• 设备像素比(device pixel ratio)
  window.devicePixelRatio，
  1，设备像素比 = 物理像素/设备独立像素
  2，当前浏览器宽度 * 屏幕像素比 = 屏幕像素值
• 每英寸的像素值( PPI(pixels per inch) )
  (PPI * 英寸) 的平方 = (物理像素宽 * 物理像素宽) + (物理像素高 * 物理像素高)

ViewPort

概念

移动设备上的viewport是指设备的屏幕上能用来显示网页的区域，一般来讲，移动设备上的viewport都要大于浏览器的可视区域。

语法

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

属性

• width
  设置layout viewport的宽度，值是一个正整数，或字符串"device-width"(代表设备宽度)
• height
  设置layout viewport的高度，这个属性对我们不重要，很少使用
• initial-scale
  设置页面的初始缩放值，为一个数字，可以带小数。
  当前设备的宽度为 375 像素（比如iphone6），在设置了initial-scale属性值为0.5后，浏览器的宽度会是750，一般情况下会设置为1.0
• maximum-scale
  设置页面的最大缩放值，为一个数字，可以带小数。
• minimum-scale
  设置页面的最小缩放值，为一个数字，可以带小数。
• user-scalable
  是否允许用户进行缩放，值为"no"或"yes"，一般使用"no"。
  yes就是允许用户在移动设备上使用两个手指进行放大/缩小，会造成一些布局问题，所以一般不使用。

CSS度量单位

• rem：root em，也就是html的字体大小值
• em：当前元素的字体大小值，继承父元素的字体大小
• vh：1/100th of the height of the viewport，也就是屏幕高的1%
• vw：1/100th of the width of the viewport，也就是屏幕宽的1%
• vmin：vh和vw两者的最小值
• vmax：vh和vw两者的最大值