移动端适配问题是指如何让⽹⻚在不同的移动设备上显⽰效果相同。下⾯是⼀些常⻅的 H5 移动端适配
⽅案:
1.
使⽤ viewport 标签
通过设置 viewport 标签的 meta 属性,来控制⻚⾯的缩放⽐例和宽度,以适配不同的设备。例如:
<meta name="viewport" content="width=device-width, initial-scale=1.0"
其中
width=device-width
表⽰设置 viewport 的宽度为设备宽度,
initial-scale=1.0
表
⽰初始缩放⽐例为 1。
1.
使⽤ CSS3 的媒体查询
通过 CSS3 的媒体查询,根据不同的设备宽度设置不同的样式,以适配不同的设备。例如:
1 arduinoCopy code@media screen and (max-width: 640px) {/* 样式 */
2 }
其中
max-width
表⽰最⼤宽度,当屏幕宽度⼩于等于 640px 时,应⽤这些样式。
1.
使⽤ rem 单位
通过将 px 转化为 rem 单位,根据不同的设备字体⼤⼩设置不同的样式,以适配不同的设备。例如:
html {font-size: 16px;
2 }@media screen and (max-width: 640px) {html {font-size: 14px;}
3 }
4
5 div {width: 10rem;
6 }
其中
font-size: 16px
表⽰将⽹⻚的基准字体⼤⼩设置为 16px,
font-size: 14px
表⽰在
屏幕宽度⼩于等于 640px 时将基准字体⼤⼩设置为 14px,
div
元素的
width: 10rem
表⽰该元
素的宽度为 10 个基准字体⼤⼩。
1.
使⽤ flexible 布局⽅案
通过使⽤ flexible 布局⽅案,将 px 转化为 rem 单位,并且动态计算根节点的字体⼤⼩,以适配不同的
设备。例如使⽤ lib-flexible 库:
1 arduinoCopy code// index.html
2 <script src="https://cdn.bootcdn.net/ajax/libs/lib-flexible/0.3.4/flexible.js"
</script
3 // index.js
4 import 'lib-flexible/flexible.js'
其中
flexible.js
会在⻚⾯加载时动态计算根节点的字体⼤⼩,并将 px 转化为 rem 单位。在样
式中可以直接使⽤ px 单位,例如:
1 div {width: 100px;height: 100px;
2 }
这个 div 元素的⼤⼩会根据设备屏幕的宽度进⾏适配。