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

然后在css中，将px转为rem就好了。我是用scss的，所以写个函数就好了。

@function s($px) { 
 
    <a href=http://developer.51cto.com/art/201707/"http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem; 
 
} 
 
p{ 
 
    font-size:s(40);padding-left: s(52); 
 
}

设置viewport中的width

这种筹划，就是定逝世viewport中的width大年夜小。

比瘸黎计稿是750的，然后就在代码上写：

@media (max-width:768px){ 
 
    //css 
 
}

<meta name="viewport" content="width=750"/>

我们用同样的页面，看看效不雅是怎么样

链接：第三种筹划(http://www.rni-l.com/mobile/index3.html)

效不雅和第二种是一样的，在手机上看也是。

.top{ 
 
    display: flex;align-items:center;padding:50px 0 113.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的，定逝世的。

感到大年夜效不雅上来看，是很完美的，然则为什么不是这种办法最风行?

我在iphone7，小米5s，谷歌浏览器模仿的iphone6plus上，字体色彩都是黄色的。所以@media媒体萌芽是无法应用的，因为已经将宽度定逝世了。而REM筹划却可以应用媒体萌芽的。因为移动端有很多奇怪的大年夜小，并且在不合的浏览器或者微信上，高度都是不合的，所以可能会造成间距有很大年夜的问题。

window.screen.width

用js，可以获取当前设备的宽度。

比较三种方法

响应式的优缺点

长处：兼容性好，@media在ie9以上是支撑的，PC和MOBILE是同一套代码的，不消分开。

缺点：要写得css相对别的两个多很多，并且各个断点都要做好。css样式会稍微大年夜点，更麻烦。

REM优缺点

长处：能保持能整体的构造效不雅，移动端兼容性好，不消写多个css代码，并且还可以应用@media进行优化。

缺点：开重要惹人一段js代码，单位都要改成rem(font-size可以用px)，计算rem比较麻烦(可以引用预处理器，然则增长了编译过程，相对麻烦了点)。pc和mobile要分开。

设置viewport中的width

长处：和REM雷同，并且不消写rem，直接应用px，加倍快捷。

总结

照样看项目需求，再决定应用哪种筹划，如不雅就手机站的话，我应用REM比较多。如不雅对距离比较精确的话，大年夜量css3动画的，就应用第三种。

【编辑推荐】

早年端开辟者须要懂得的基本编译道理和说话常识
最风行的5个前端框架比较
3/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　红山区：打造智慧城市核心大脑

作为赤峰市的首善之区，红山区在聪明城市扶植中先行一步。决定计划者把这项普惠庶平易近的平易近生工作，挂在心上，抓在手上，全力推动。2016年以来，红山区按照“当局主导、企业投资>>>详细阅读

本文标题：总结个人使用过的移动端布局方法

地址：http://www.17bianji.com/lsqh/36381.html

1/2 1