移动端适配

当我们进行移动端页面开发的时候，经常会被告知使用viewport的<meta>标签，或者使用rem(相对于根元素html的font-size计算)，em(相对于父元素的font-size计算)，或者%... ... 方式多种多样，各各都有绝招，这里总结一下我目前使用过的，希望未来能尝试更多，找到 Best Solution ~

知识点1：viewport

Q1： 什么是viewport
A： viewport视窗口的意思。即我们所能看到的浏览器的可视窗口的大小，但是移动设备的分辨率相对于桌面电脑来说都比较小，为了能在移动端正常显示为桌面浏览器而设计的网页，移动端的浏览器都把默认的viewport设置为980px到1024px不等（移动端viewport比默认窗口要大）。--->> 这样会导致 出现横向滚动条，造成很多设备上字体变成原来的1/3。

Q2： 如何理解viewport设置
A： <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1,user-scalable=no">这个设置翻译成大白话就是：浏览器呀，你就按照你的自然宽度来来给我显示网站就行了，不要自作聪明。让当前viewport的宽度等于设备的宽度。
width是viewport的宽度，height是viewport的高度。initial-scale初始缩放比例。minimum-scale允许用户缩放到的最小比例。user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

Q3：meta viewport标签的作用
A：meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。

知识点2：设备独立像素 & 物理像素

在桌面浏览器中css中1px往往对应着电脑屏幕的1个物理像素。但是，css中的像素是一个抽象单位，在不同的设备或者不同环境中，css中的1px所代表的设备物理像素是不同的。

1. css中的像素 !== 设备的物理像素
2. iphone的Retina屏
   移动设备的屏幕像素密度越来越高，iphone3的分辨率320x480，此时的一个css像素确实等于一个屏幕物理像素。
   iphone4开始，推出Retina屏，视网膜屏幕。分辨率提高了一倍，640x960，但此时屏幕尺寸没有变。（同样大小的屏幕，像素却多了一倍），一个css像素等于两个物理像素。
3. devicePixelRatio属性
   window对象的devicePixelRatio属性，为设备物理像素和设备独立像素的比例。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

devicePixelRatio = 1&2

知识点3：media

在css中@media (min-width: 768px)表示最小是768也就是>=768

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

media type的几种使用方法
all（全部）,screen（屏幕）,print（页面打印或预览模式）

1. <link href="css/reset.css" media="screen" />

<style type="text/css" media="screen">
  @import url("css/style.css"); 
</style>

media screen {
  Selector {rules}
}

4. @import url('style.css') screen;
5. <?xml-stylesheet media="screen" href="css/style.css" ？>

知识点4：Sass

Q1：如何更方便使用rem
A：根据rem的使用原理，可以知道px转rem需要在html根元素设置一个font-size值，因为rem是相对于html根元素。

$baseFontSize: 16px !default;
html {
  font-size: $baseFontSize;
}
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}