html5移动端开发部分总结

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

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

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

其它相关配置内容如下:

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值

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注