好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

移动端H5-第一课css篇

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 {

font-size: 62.5%;

}

@media (max-width: 414px) {

html {

//iphone6+

font-size: 80.85%;

}

}

@media (max-width: 375px) {

html {

font-size: 73.24%;

}

}

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

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

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

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

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

3.a标签内容语义化

大多数时候我们都会给一片区域加上点击跳转的功能。如下图:

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素,是没有宽和高的。不能够把容器撑开。

一种解决办法就是给a 标签设置block 属性。如下:

a{display:block;}

查看更多关于移动端H5-第一课css篇的详细内容...

  阅读:32次