4种移动端适配方法：
1.@mediascreen实现网页界面设计的自适应
特点:不用组件,可以满足各类窗口尺寸，只需在CSS中增加@mediascreen属性。
官方文档：@media可以应对各种的屏幕大小设置各种的样式，尤其是假如你需要设置设计自适应的网页，@media是十分实用的。
语法：@mediamediatypeand|not|only(mediafeature){CSS-Code;}
1 /* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */ 2 3 h5{ 4 5 color: black; 6 7 } 8 9 @media screen and (max-width: 1200px){ 10 11 h5{ 12 13 color: #eee; 14 15 } 16 17 } 18 19 /* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */ 20 21 @media screen and (min-width: 869px) and (max-width: 900px){ 22 23 h5{ 24 25 color: red; 26 27 } 28 29 } 30 31 /* 屏幕宽度小于 320px 则 h5 的字体大小是20px */ 32 33 @media only screen and (max-width: 320px){ 34 35 h5{ 36 37 font-size: 20px; 38 39 } 40 41 }
随后我着手接触手机端的适配。
2.rem适配
这个方法是CSDN博主「sxs1995」的原创文章，blog.csdn.net/sxs1995/art…
计算单位是640px=6.40rem,
当设计稿的宽是750px时，i=750;当设计稿的宽是640px时，i=640。
弊端：第一次载入网页时，会闪线1-2s，在手机上阅读的用户体验欠佳
1 !function(n){ 2 3 var e=n.document, 4 5 t=e.documentElement, 6 7 i=720, 8 9 d=i/100, 10 11 o="orientationchange"in n?"orientationchange":"resize", 12 13 a=function(){ 14 15 var n=t.clientWidth||320;n>720&&(n=720); 16 17 t.style.fontSize=n/d+"px" 18 19 }; 20 21 e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) 22 23 }(window);
3.用@media实现rem适配
特点：当屏幕宽改变时，只需调整Html元素中的font-size就可以适配
1 /* 不同屏幕宽度，设置不同的font-size */ 2 3 @media screen and (width:750px){html{font-size:100px}} 4 5 @media screen and (width:749px){html{font-size:99.87px}} 6 7 @media screen and (width:748px){html{font-size:99.73px}} 8 9 ... 10 11 @media screen and (width:321px){html{font-size:42.8px}} 12 13 @media screen and (width:320px){html{font-size:42.67px}}
4.用vw定制rem自适应设计
在掘金上看到作者JowayYoung的灵活运用CSS开发技巧的文章，当中一方面是：应用vw定制rem自适应设计
特点：手机端应用rem布局需要通过JavaScript设置各种屏幕宽高比的font-size，结合vw单位和calc()可脱离JavaScript的控制
1 /* 基于UI width=750px DPR=2的页面 */ 2 3 html { 4 5 font-size: calc(100vw / 7.5); 6 7 }
现阶段，上述的方法我都试过，处于代码量上考虑，现在我主要用的是用vw定制rem自适应设计，大伙儿有其他更好的建议吗?