本文主要介绍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="orientationchange"inn?"orientationchange":"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自适应布局，大家有其他更好的建议吗？欢迎评论。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/38465.html；