移动端 h5开发相关内容总结——CSS篇

Posted 2020-10-03

1.移动端开发视窗口的添加

h5端开发下面这段话是必须配置的

<meta name="viewport" content="width=device-width,
 initial-scale=1, user-scalable=no">

• 1

其它相关配置内容如下：

• width viewport 宽度(数值/device-width)

• height viewport 高度(数值/device-height)

• initial-scale 初始缩放比例

• maximum-scale 最大缩放比例

• minimum-scale 最小缩放比例

• user-scalable 是否允许用户缩放(yes/no)

• minimal-ui ios 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。

2.媒体查询的改进

之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。 
比如下面的 媒体查询代码

html {    //iphone5
    font-size: 62.5%;}@media (max-width: 414px) {
    html {        //iphone6+
        font-size: 80.85%;
    }
}@media (max-width: 375px) {
    html {        //iphone6
        font-size: 73.24%;
    }
}

这样做的结果，有两个很明显的缺点。

• 适配屏幕的尺寸不是连续的。

• 在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。

详细的内容请看这里 根据iPhone6设计稿动态计算rem值