移动端适配2:多种方案一次性搞定移动端适配

·  阅读 747
移动端适配2:多种方案一次性搞定移动端适配

这是我参与2022首次更文挑战的第6天,活动详情查看:2022首次更文挑战」。

理解viewport

接上篇文章细讲的像素关系juejin.cn/post/705597… 我们可以发现如下问题

移动端和PC端不同,PC端的由于大部分是1px=1pt,也就是一般PC逻辑分辨率超过很大,对应到展示在375左右的移动端设备上,内容肯定一屏幕展示不完的,这个时候肯定要有横向滚动条来展示全部内容,移动端就提出了两个窗口概念

视口当前可见的部分叫做可视视口(visual viewport) 。可视视口可能会比布局视口layout viewport )更小,他们的关系如下

    可视视口(屏幕展示的区域)+横向滚动条的区域=布局视口
复制代码

viewport指的就是展示网页的区域,一般浏览器会将viewport设置980大于可视区域,这样就出现横向滚动条了,如下就是一般浏览器的默认viewport宽度

image.png 为了印证这个猜想,平时创建html文件的时候,你很可能都没去管meta的viewport标签,快捷键创建html,他会自动带上,然后打开chrome调试模式,如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带有viewport</title>
    <style>
        html,body{
            background:red;
        }
    </style>
</head>
<body>
    
</body>
</html>
复制代码

效果如下

image.png 如果去掉<meta name="viewport" content="width=device-width, initial-scale=1.0">,设置了viewport为视口宽度为设备宽度,所以可视窗口=布局窗口。取消了这个设置,就会展示默认的viewport宽度

image.png 关于viewport的具体参数,MDN上面很少介绍,参考三方网站详细表

width设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale允许用户的最大缩放值,为一个数字,可以带小数
height设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

其实主要平时用到的属性就如vscode插件自动生成的两句,仔细想为什么要写这两句,width=device-width设置视口宽度=布局宽度,但是在iphone和ipad上,无论是竖屏还是横屏,宽度都是竖屏一样的宽度。使用initial-scale=1.0是什么意思呢,就是将网页缩放到和视口宽度的100%,但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时的宽度。这个时候写两句的话,他就会选择最大的起效,兼容了所有设备

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

1.纯缩放百分比适配

假如一行四个div元素

div{
    width:25%
}
复制代码

这种方式在bootstrap等响应式框架用的多,这样的优点有

  • 根据大屏幕,小屏幕都可以直接百分比,不会出现很大留白,显得页面极其不平衡
  • 不用关心px等宽度具体是多少,会自动适配
  • 不存在兼容性问题

缺点有

  • 不同屏幕宽度差距过大会造成页面按钮内容变形。
  • 完全相对于父元素,元素脱离文档流就会造成页面混乱

2.多套代码分端适配

这种采用媒介的形式,css提供了@media用于书写分段样式

     @media only screen and (min-width: 300px) {
            .main {
                width: 60px;
            }
        }

        @media only screen and (min-width: 400px) {
            .logo {
                width: 80px;
            }
        }
复制代码

优点:

  • 显示更加灵活,比如一行在300px下面展示3个按钮,在400px就可以手动改为4个按钮

缺点

  • 需要维护多套设计图和多套CSS样式,维护难度大

3.flex和grid弹性布局适配

弹性布局是根设备宽度自适应撑满屏幕,根据屏幕自适应展示几个按钮,这种模式可以小范围适配,对于移动端H5适配还是要配合rem模式,并且兼容性不是很好。

4.rem适配

使用rem相对单位,例如根元素设置20px,那么1rem=20px,后续所有单位都根据根元素做换算,30px就是1.5rem,这种方式的优点如下

  • 可以通过改变根元素font-size按比例适配一个页面
  • 灵活根据尺寸自定义根节点的rem值大小

当然有缺点就是

  • 还是需要配合@media进行设置不同尺寸font-size的rem大小,不过rem配合@media已经是比较主流的方案了

5.使用rem+vw适配

为了做好浏览器的适配方案,参考网上的设计总结了一套方案

首先移动端的设计图都是相对于width:750px的标准设计图适配,第一步我们设定

100vw=750px
那么
1px=0.1333vw
复制代码

然后第二步设定

设定    
    1rem=100px
    7.5rem=750px
那么
    1rem=100px=13.33vw
复制代码

第三步采用@media做简单的区间适配

html {
    font-size: 13.33333vw;
}

@media screen and (max-width: 300px) {
  html {
  font-size:1rem;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  html {
    font-size:1rem;
    font-size: 13.33333vw;
  }
}
...根据适配屏幕多少操作
复制代码

然后由于真实计算出每个屏幕的rem对应的px是多少

html {
    font-size: 13.33333vw;
}

@media screen and (max-width: 300px) {
  html {
    font-size: 40px;//根据真实屏幕逻辑像素所计算出来的
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  html {
    font-size: 53.32px;//根据真实屏幕逻辑像素所计算出来的
    font-size: 13.33333vw;
  }
}
    
复制代码

注意vw只能在安卓4.0和ios8以上使用

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改