移动端的适配方案

1. 使用meta viewport进行适配

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

2. 媒体查询（响应式布局）

link元素中的CSS媒体查询：

<link rel="stylesheet"  href="mobile.css" media="(max-width: 500px)">

层叠样式表的CSS媒体查询：

 @media (max-width: 500px) {
	 .facet_sidebar {
		display: none;
	}
}        
@media (min-width:325px) and (max-width: 800px) { 
    body{
        background-color: black;
    }
}

媒体查询会根据不同的条件进行选择css来进行布局，对于图片的响应式设计：

• 等比例缩放图片

img{  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}   // 等其他方法

• 引用github上的rwd-images.js和 .htaccess文件，降低小屏幕设备的图片分辨率
  经典的响应式网站实例：smashingmagazine

响应式经常采用百分比布局，这个布局的缺点是元素高度无法确定

3. 动态 rem方案（手机专用）

3.1 宽度介绍

• px：像素
• em：一个M的宽度（或者一个汉字的宽度），相对于本身的字体大小单位，由于继承的原因父元素的字体大小可以影响打em值
• rem：相对于根元素（Html元素）的字体大小单位
  Html根元素大小默认为16px，所以10rem=160px，用户可以更改浏览器默认根元素字体值，注意chrome浏览器默认的最小字体大小是12px
• vh：viewport height 视口高度的1/100 100vh
• vw：视口宽度的1/100 100vw
  100vw 是指视区宽度，即浏览器内部的可视区域大小，不包括任务栏，标题栏以及底部工具栏，等于 window.innerWidth

3.2 以宽度为基准的缩放布局（几乎完美还原设计稿）

• 通过JS是 1rem = window.innerWidth

<script>
	document.write('<style>html{font-size:' + window.innerWidth + 'px;}<\style>')
<\script>

a、也可以使用window.innerWidth/10，注意不能除以100，因为浏览器有默认最小像素
b、当元素太小时，使用px，如border
c、对于font-size可使用16px，不使用rem不影响美观

• 通过scss将px自动转化成rem

a、文件监听命令行： node-sass -wr scss -o css 其中scss是写代码的目录，css是输出代码目录
b、在scss中写入函数，之后使用就能自动得到相应的css

@ function px($px){
	@return $px / $designWidth *10 + rem}
$ designWidth:640    //设计稿宽度
//之后就可以愉快的书写了
body{
  p{
    font-size = px(60);
  }
}