这篇文章主要是总结一下我在移动端布局中用过的方法。分为三种，一种是响应式布局，使用@meida判断每一种尺寸；第二个是REM；最后是在视口中设置宽度。响应式布局的感觉最好理解，用@media做断点，每个断点写css。@media(max-width:768px){//css}上面代码在浏览器宽度低于768时有效，同理，将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表示'and'，只有当前后两个条件都满足，只有不满足，除此之外，上面4个@media，分别的效果是：当浏览器宽度小于1000px时，当浏览器宽度大于1000px小于1150px时，当on屏幕显示和宽度小于1150px除了在宽度小于1150px时在打印和点播“加载”时显示之外，css@media还可以用于链接标签。当浏览器宽度小于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;}.5rem=50px/100转换后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//代码如下':'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边框问题。具体效果可以打开以下链接：第一种方案第二种方案淘宝手机REM这个很简单，加载js即可然后在css中，将px转为rem即可。我用的是scss，所以随便写个函数。@functions($px){@return($px/75)*1rem;}p{font-size:s(40);padding-left:s(52);}比如p的font-size就是750的设计稿是40px，然后s(40)就OK了。在视口中设置宽度的方案是固定视口中的宽度。比如设计稿是750，然后在代码上写：我们用同一个页面看看效果如何链接：第三个的效果scheme和第二个是一样的，手机端也是一样的。.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，就死定了。从效果上感觉很完美，但为什么这种方法不是最流行的呢？@media屏幕和(max-width:360px){.box{color:red;}}@media屏幕和(max-width:520px){.box{color:black;}}@media屏幕和(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动画使用第三种。
