这篇文章主要是总结一下我在移动端布局中用过的方法。分为三种，一种是响应式布局，使用@meida判断每一种尺寸；第二个是REM；最后是在视口中设置宽度。响应式布局的感觉最好理解，用@media做断点，每个断点写css。@media(max-width:768px){//css}以上代码在浏览器宽度低于768px时有效。同理，如果把max改成min，高于768时才生效。可以设置宽高，也可以同时设置多个值。在MDN上，@media，我发现可以判断很多值。宽度、高度、纵横比、颜色（这是指定输出设备的每个像素单元的比特值），是水平还是垂直，还有很多，你可以去MDN看看。MediaType@meida也可以根据媒体类型断点。all,allequipmentprint,printscreen,五颜六色的电脑屏幕语音，我不知道那是什么。关键字@media(max-width:1000px){div{background:blue;}}@media(min-width:1000px)and(max-width:1150px){div{background:yellow;}}@mediaonlyscreenand(max-width:1150px){div{border:solid1px;}}@medianotprintand(max-width:1150px){div{border-radius:50%;}}并且意思是'and'，前后条件都满足的时候，唯一没有，除此之外，上面的4个@media，各自的效果是：当浏览器宽度小于1000px当浏览器宽度大于1000px小于1150px当显示在屏幕上且宽度小于1150px除了按需“加载”css@media还可以在打印外显示且宽度小于1150px时用在链接标签上。当浏览器宽度小于500px时，1.css的样式才会生效。但这并不代表1.css大于500px时不加载。使用@media属性后，只有在满足条件时，才会让对应的css文件生效。而且使用这种方法的一个好处是你不需要在css中写@media。通常响应式网站开发通常响应式网站开发，我会先对比PC和MOBILE的设计稿，看看有什么不同，然后再写css。通常使用弹性。宽度尽量用百分比，间距用ems，高度，字体大小，可以轻松控制大小。REMREM的单位会根据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){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=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);})(文件,窗口);上面的代码直接根据屏幕宽度计算出font-size。淘宝手机端REM方案也是根据你的dpr计算出来的，会整体缩放。淘宝的解决方案比上面的代码好多了。注意框架的大小。第二张图的边框比第一张小，都是border:solid1px。所有其他边距都相同。淘宝的方案解决了另外一个问题：1px边框问题。具体效果可以打开以下链接查看：第一种方案（http://www.rni-l.com/mobile/index2.html）第二种方案（http://www.rni-l.com/mobile/index.html)淘宝手机REM很简单，加载js即可然后在css中，将px转为rem即可。我用的是scss，所以随便写个函数。@functions($px){@return($px/75)*1rem;}p{字体大小:s(40);padding-left:s(52);}比如750的设计稿中p的font-size为40px，那么s(40)就OK了。在视口中设置宽度的方案是固定视口中的宽度。比如设计稿是750，然后在代码上写：我们用同一个页面看看效果如何链接：第三种方案（http://www.rni-l.com/mobile/index3.html）效果和第二种一样，在手机上也是一样的。.top{display:flex;align-items:center;padding:50px0113.5px;justify-content:space-between;width:100%;p{font-size:40px;padding-left:52px;}img{width:71.5px;height:71.5px;display:block;margin-right:63.5px;}}并且代码直接使用了px，所以死掉了。从效果上看感觉很完美，但为什么这种方法不是最流行的呢？@mediascreenand(max-width:360px){.box{color:red;}}@mediascreenand(max-width:520px){.box{color:black;}}@mediascreenand(max-width:750px){.box{color:yellow;}}我在谷歌浏览器模拟的iphone7、小米5s、iphone6plus上，字体颜色都是黄色的。所以不能使用@media媒体查询，因为宽度已经固定。REM解决方案可以使用媒体查询。因为移动端有很多奇怪的尺寸，不同的浏览器或者微信上高度不一样，可能会造成间距很大的问题。window.screen.width使用js获取当前设备的宽度。比较三种响应方式的优缺点。优点：兼容性好，ie9以上支持@media，PC和MOBILE是同一套代码，不用分开。缺点：要写的css比其他两个多很多，每个断点都要做好。css样式会稍微大点，比较麻烦。REM优缺点优点：可以保持整体布局效果，移动端兼容性好，不需要写多css代码，也可以使用@media进行优化。缺点：一开始需要引入一段js代码，单位必须改成rem（font-size可以用px），计算rem比较麻烦（可以使用预处理器，但是增加了编译过程，比较麻烦）。PC和手机应该分开。在视口中设置宽度的优点：和rem一样，不用写rem，直接用px速度更快。缺点：效果可能不如rem，图片可能比较模糊，@media不能断点，在不同尺寸的手机上显示高度间距可能相差较大。综上所述，在决定使用哪种解决方案之前，取决于项目需求。如果是移动站，我用REM的多。如果距离更准确，大量CSS3动画使用第三种。
