4种挪移端适配办法

1.@media screen实现网页规划的自顺应

长处 : 无需插件,能够顺应各种窗口大小，只需在CSS中增加@media screen属性。

官方文档：@media 可以针对不一样的屏幕尺寸设定不一样的样式，特殊是假如你需要设定设计响应式的页面，@media 是非常有用的。

语法：@media mediatype and|not|only (media feature) { CSS-Code; }

/* 屏幕宽度大于 1200px 则 h5 的字体色彩是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体色彩为红色，屏幕宽度只要在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (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){
  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 即可适配

/* 不一样屏幕宽度，设定不一样的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4.用vw定制rem自顺应规划

在掘金上看到作者JowayYoung的灵敏使用CSS开发技巧的文章，其中一点是：使用vw定制rem自顺应规划

长处 ： 移动端使用rem规划需要通过JS设定不一样屏幕宽高比的font-size，结合vw单位和calc()可离开JS的操纵

/* 基于UI width=750px DPR=2的页面 */
html {
  font-size: calc(100vw / 7.5);
}

当前，以上的办法我都用过，站在代码量上思考，我此刻主要用的是用vw定制rem自顺应规划，大家有其他更好的倡议吗？我会认真参照 的，感谢。

引荐教程：《CSS教程》

以上就是4种移动端适配办法的具体内容，更多请关注百分百源码网其它相关文章！