怎么做移动端的样式适配？
在移动端虽然整体来说大部分浏览器内核都是 webkit，而且大部分都支持 css3 的所有语法。但手机屏幕尺寸不一样，分辨率不一样，或者有时需要考虑横竖屏的问题，或者考虑到各式各样的移动端兼容性问题。
1、方案选择
1、使用 css 的媒体查询 @media
基于 css 的媒体查询属性 @media 分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性，示例如下所示。虽然此方法能在一定程度上解决移动设备适配的问题，但我们也可以看出其存在以下问题，所以其已几乎被历史潮流淘汰。
页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，这个代价有点高；
如果再多一种屏幕尺寸，就得多写一个 @media 查询块；
@media only screen and (min-width: 375px) {
.logo {
width : 62.5px;
}
}
@media only screen and (min-width: 360px) {
.logo {
width : 60px;
}
}
@media only screen and (min-width: 320px) {
.logo {
width : 53.3333px;
}
}
2、使用 rem 单位
rem（font size of the root element）是指相对于根元素的字体大小的单位，如果我们设置 html 的 font-size 为 16px，则如果需要设置元素字体大小为 16px，则写为 1rem。但是其还是必须得借助 @media 属性来为不同大小的设备设置不同的 font-size，相对上一种方案，可以减少重复编写相同属性的代价，简单示例如下所示。
我们也能看到该方案存在以下问题：
不同的尺寸需要写多个 @media；
所有涉及到使用 rem 的地方，全部都需要调用方法 calc() ，这个也挺麻烦的；
@media only screen and (min-width: 375px) {
html {
font-size : 375px;
}
}
@media only screen and (min-width: 360px) {
html {
font-size : 360px;
}
}
@media only screen and (min-width: 320px) {
html {
font-size : 320px;
}
}
//定义方法：calc
@function calc($val){
@return $val / 1080;
}
.logo{
width : calc(180rem);
}
3、flexible 适配方案
1、 使用 rem 模拟 vw 特性适配多种屏幕尺寸
它的核心代码如下所示
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
.2、控制 viewport 的 width 和 scale 值适配高倍屏显示
设置 viewport 的 width 为 device-width，改变浏览器 viewport（布局视口和视觉视口）的默认宽度为理想视口宽度，从而使得用户可以在理想视口内看到完整的布局视口的内容。
等比设置 viewport 的 initial-scale、maximum-scale、minimum-scale 的值，从而实现 1 物理像素=1 css像素，以适配高倍屏的显示效果
var metaEL= doc.querySelector('meta[name="viewport"]');
var dpr = window.devicePixelRatio;
var scale = 1 / dpr
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
4、viewport 适配方案
vw 作为布局单位，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。 viewport 相关概念如下：
- vw：是 viewport’s width 的简写，1vw 等于 window.innerWidth 的 1%；
- vh：和 vw 类似，是 viewport’s height 的简写，1vh 等于 window.innerHeihgt 的 1%；
- vmin：vmin 的值是当前 vw 和 vh 中较小的值；
- vmax：vmax 的值是当前 vw 和 vh 中较大的值；
若视觉稿宽度为 750px，视觉稿中某个字体大小为 75px，则我们的 css 属性只要如下这么写，不需要额外的去用 js 进行设置，也不需要去缩放屏幕等；
.logo {
font-size: 10vw; // 1vw = 750px * 1% = 7.5px
}
1、设置 meta 标签
在 html 头部设置 mata 标签如下所示，让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2、px 自动转换为 vw
设计师一般给宽度大小为 375px 或 750px 的视觉稿，若采用 vw 方案的话，需要将对应的元素大小单位 px 转换为 vw 单位（需要手动计算将 px 转换为 vw）且不利于后续代码维护
安装 postcss-px-to-viewport 插件，来将 px 自动转换为 vwnpm install postcss-px-to-viewport --save-dev
2. iPhoneX 适配方案
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：
适配步骤
-
设置网页在可视窗口的布局方式
新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口，只有设置了 viewport-fit=cover，才能使用 env()<meta name="viewport" content="width=device-width, viewport-fit=cover"> -
fixed 完全吸底元素场景的适配
-
可以通过加内边距 padding 扩展高度：
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
或者通过计算函数 calc 覆盖原来高度：文章来源：https://www.toymoban.com/news/detail-511916.html
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
}
- fixed 非完全吸底元素场景的适配
像这种只是位置需要对应向上调整，可以仅通过下外边距 margin-bottom 来处理
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
或者，你也可以通过计算函数 calc 覆盖原来 bottom 值：文章来源地址https://www.toymoban.com/news/detail-511916.html
{
bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}
到了这里，关于CSS知识点汇总(十)--移动端适配的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[深度学习]1. 深度学习知识点汇总](https://imgs.yssmx.com/Uploads/2024/02/689507-1.png)
