简介本文主要介绍4种移动端适配方法，都是一些自己在实际操作中总结出来的。1、@mediascreen实现网页布局的自适应优点:无需插件,能够适应各种窗口大小，只需在CSS中添加@mediascreen属性。官方文档：@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。语法：@mediamediatypeand|not|only(mediaf
本文主要介绍4种移动端适配方法，都是一些自己在实际操作中总结出来的。
1、@media screen实现网页布局的自适应
优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。
官方文档：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
语法：@media mediatype and|not|only (media feature) { CSS-Code; }
/*屏幕宽度大于1200px则h5的字体颜色是black*/h5{color:black;}@mediascreenand(max-width:1200px){h5{color:#eee;}}/*h5字体颜色为红色，屏幕宽度只有在869px与900px之间生效*/@mediascreenand(min-width:869px)and(max-width:900px){h5{color:red;}}/*屏幕宽度小于320px则h5的字体大小是20px*/@mediaonlyscreenand(max-width:320px){h5{font-size:20px;}}
紧接着我开始接触移动端的适配。
2.rem适配
这个方法是CSDN博主「sxs1995」的原创文章，blog.csdn.net/sxs1995/art…
计算单位是 640px = 6.40rem,
当设计稿的宽度是 750px 时， i = 750； 当设计稿的宽度是 640px 时， i = 640 。
缺点 ： 首次加载页面时，会闪线1-2s，在手机上预览的用户体验不好
!function(n){vare=n.document,t=e.documentElement,i=720,d=i/100,o="orientati "inn?"orientati ":"resize",a=function(){varn=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 即可适配
/*不同屏幕宽度，设置不同的font-size*/@mediascreenand(width:750px){html{font-size:100px}}@mediascreenand(width:749px){html{font-size:99.87px}}@mediascreenand(width:748px){html{font-size:99.73px}}...@mediascreenand(width:321px){html{font-size:42.8px}}@mediascreenand(width:320px){html{font-size:42.67px}}
4.用vw定制rem自适应布局
在掘金上看到作者JowayYoung的灵活运用CSS开发技巧的文章，其中一点是：使用vw定制rem自适应布局
优点 ： 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
/*基于UIwidth=750pxDPR=2的页面*/html{font-size:calc(100vw/7.5);}
目前，以上的方法我都用过，站在代码量上考虑，现在主要用的是用vw定制rem自适应布局，大家有其他更好的建议吗？欢迎评论。
下载链接：网站源码/小程序源码/网站模板下载
