云栖号资讯：【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！
我最开始接触到的是经理让我把一个PC官网写到它的自适应，即写到是屏幕自适应到宽320的尺寸。我当时用到的是@media screen。
1.@media screen实现网页布局的自适应
优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。
紧接着我开始接触移动端的适配。
2.rem适配
计算单位是 640px = 6.40rem,
当设计稿的宽度是 750px 时， i = 750；
当设计稿的宽度是 640px 时， i = 640 。
缺点 ： 首次加载页面时，会闪线1-2s，在手机上预览的用户体验不好
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);3.用@media实现rem适配
优点：当屏幕宽度更改时，只需修改Html元素中的 font-size 即可适配
4.用vw定制rem自适应布局
在掘金上看到作者JowayYoung的灵活运用CSS开发技巧的文章，其中一点是：使用vw定制rem自适应布局
优点 ： 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
目前，以上的方法我都用过，站在代码量上考虑，我现在主要用的是用vw定制rem自适应布局，大家有其他更好的建议吗？我会认真参考的，谢谢。
【云栖号在线课堂】每天都有产品技术专家分享！
课程地址：https://yqh.aliyun.com/live立即加入社群，与专家面对面，及时了解课程最新动态！
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
原文发布时间：2020-04-23
本文作者：小白踩坑
本文来自：“掘金”，了解相关信息可以关注“掘金”
