总结个人使用过的移动端布局方法

这篇文章，主要是总结一下，我在移动端布局用过的方法。有三种，一种是响应式布局，利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。
响应式布局
这种感觉是最好理解了，利用@media进行断点，在每个断点中编写css。
@media (max-width:768px){

//css 

}
上面这段代码，在浏览器的宽度低于768时有效。同理，如果把max换成min，就会变成高于768时有效。可以设置宽度，也可以设置高度，也可以同时设置多个值。
在MDN,@media上，发现很多值都可以做判断的。宽，高，宽高比，颜色(这个是指定输出设备每个像素单位的比特值)，是否横屏或竖屏，还有很多，可以去MDN看看。
媒体类型
@meida还可以根据媒体类型进行断点。
all，所有设备
print，打印
screen，彩色的电脑屏幕
speech，不知道什么来的。
关键字
@media (max-width:1000px){

div{background:blue;} 

}

@media (min-width:1000px) and (max-width:1150px){

div{background: yellow;} 

}

@media only screen and (max-width:1150px){

div{border:solid 1px;} 

}

@media not print and (max-width:1150px){

div{border-radius:50%;} 

}
and，就是‘和’的意思，前后两个条件都达到时
only，唯一
not，除了这个之外
上面4个@media，分别的效果是：
当浏览器宽度低于1000px时
当浏览器宽度大于1000px 和 小于1150px时
当在屏幕上显示 和 宽度小于1150px时
除了在打印上显示外 和 宽度小于1150px时
按需‘加载’css
@media还可以用在link标签上。

当浏览器宽度低于500px时，1.css的样式才会有效果。但这不代表大于500px时，就没加载了1.css。使用了@media属性后，只会让你当条件符合了，才让对应的css文件有效果。而且用这种方式有一个好处，就是不用在css里写@media。

平常响应式网站的开发
平时响应式网站的开发，我都会先对比PC和MOBILE的设计稿，看看有什么区别，然后才进行编写css。通常都是使用flex。宽度尽量用百分比，间距、高度、字体大小使用 em，就可以很方便的进行大小的控制。
REM
REM这个单位，会根据html的font-size大小进行转换。
html{font-size:100px;}

p{padding-top:.5rem;}
转换后p的padding-top就是50px了。只要我们进行适当的计算，当前屏幕的宽度，html的font-size是多少px就OK了。
如何计算当前html的font-size值
比如，我们拿到的设计稿是750px，那就设置成当屏幕宽度是750的时候，html的font-size就是100px(当然这个100px你可以随意设置的，我设置成100px只是方便我计算)，然后就根据当前屏幕的宽度 / 750 * 100，就得到了当前屏幕宽度的font-size值。
//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100

//代码如下

(function (doc, win) {

var docEl = doc.documentElement, 

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 

recalc = function () { 

  var clientWidth = docEl.clientWidth; 

  if (!clientWidth) return; 

  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; 

}; 



if (!doc.addEventListener) return; 

   win.addEventListener(resizeEvt, recalc, false); 

   doc.addEventListener('DOMContentLoaded', recalc, false); 

})(document, window);
上面这段代码，是直接根据屏幕宽度进行计算font-size的。而淘宝移动端REM方案，还根据你的dpr去计算，而且会进行整体的缩放。淘宝的这种方案，比上面的代码会好很多。

大家注意边框的大小。第二张图的边框是比第一张图的小的，两个都是border:solid 1px。其他的边距都是一样。淘宝的方案，解决了另一个问题：边框1px的问题。
大家可以打开以下链接，看看具体的效果：
第一种方案(http://www.rni-l.com/mobile/index2.html)
第二种方案(http://www.rni-l.com/mobile/index.html)
淘宝移动端REM
这个很简单，只需要加载js就好了