移动端适配方案具体实现以及对比
2020/11/27 18:00:01 阅读：4232
发布者：4232
- media queries
- flex 布局
- rem + viewport
- vh vw
- 百分比
- bootstrap
一、Meida Queries
meida queries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。
二、Flex 弹性布局
以天猫的实现方式进行说明：它的 viewport 是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死，宽度自适应，元素都采用 px 做单位。
随着屏幕宽度变化，页面也会跟着变化，效果就和 PC 页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调
三、rem+viewport 缩放
实现原理：根据 rem 将页面放大 dpr 倍, 然后 viewport 设置为 1/dpr.
如 iphone6 plus 的 dpr 为 3, 则页面整体放大 3 倍, 1px(css 单位)在 plus 下默认为 3px(物理像素)
然后 viewport 设置为 1/3, 这样页面整体缩回原始大小. 从而实现高清。
这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是 device-width。这个 device-width 的计算公式为：
设备的物理分辨率/(devicePixelRatio * scale)，在 scale 为 1 的情况下，device-width = 设备的物理分辨率/devicePixelRatio。
四、rem 实现
rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据屏幕宽度设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的。viewport 是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。
五、纯 vw 方案
vw : 1vw 等于 视口宽度 的 1%
vh : 1vh 等于 视口高度 的 **1% **
vmin : 选取 vw 和 vh 中 最小 的那个
vmax : 选取 vw 和 vh 中 最大 的那个
六、vw + rem 方案
// scss 语法// 设置html根元素的大小 750px->75 640px->64
// 将屏幕分成10份，每份作为根元素的大小。
$vw_fontsize: 75
@function rem($px) {
// 例如：一个div的宽度为100px，那么它对应的rem单位就是（100/根元素的大小）* 1rem
@return ($px / $vw_fontsize) * 1rem;
}
$base_design: 750
html {
// rem与vw相关联
font-size: ($vw_fontsize / ($base_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}
七、百分比
使用百分比%定义宽度，高度用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。
【 微信扫一扫 】
