4种移动端适配方法

1.@media screen实现网页布局的自适应

优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

h5{

    color: black;

  }

@media screen and (max-width: 1200px){

  h5{

    color: #eee;

  }

}

@media screen and (min-width: 869px) and (max-width: 900px){

  h5{

    color: red;

  }

}

@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，在手机上预览的用户体验不好

1

2

3

4

5

6

7

8

9

10

11

12

!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 即可适配

1

2

3

4

5

6

7

@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的控制

1

2

3

4

html {

  font-size: calc(100vw / 7.5);

}

登录后复制

目前，以上的方法我都用过，站在代码量上考虑，我现在主要用的是用vw定制rem自适应布局，大家有其他更好的建议吗？我会认真参考的，谢谢。

推荐教程：《css-tutorial.html" target="_self">CSS教程》

以上就是4种移动端适配方法的详细内容，更多请关注php中文网其它相关文章！

相关知识

移动端
手机移动端快速开发
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
Html+Css+js实现春节倒计时效果（移动端和PC端）
移动Web实训DAY
一分钟告诉你建行移动端网络学习怎么学
简约排版鲜花植物类移动端店铺首页
基于深度卷积神经网络的移动端花卉识别系统
【移动开发】详细介绍
电商平台移动端应用开发及维护服务合同.doc

网址: 4种移动端适配方法 https://www.huajiangbk.com/newsview948596.html