移动端 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 {
    //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值

3.a标签内容语义化

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

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素，是没有宽和高的。不能够把容器撑开。
一种解决办法就是给a 标签设置block 属性。如下：

<style>
    a{
    display:block;}
</style>

<a>
    <div></div>
</a>

功能上已经没有问题。但是在语义化的层面上，上面的代码是不标准的。

最好的做法就是做如下的修改,这样不会使自己的 html 代码显的太突兀：

<style>
 a{
   display:block;}
 span{
   dispaly:block;}
</style>

<a>
    <span></span>
    <span></span>
    <span></span>
</a>

4.为自己的页面设置最大宽度和最小宽度

如果我们使用的是rem 单位，使用 js 动态计算font-size 值的话，我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。
我们参看下京东和淘宝的h5 页面

我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示（当然这不是必须的）。

我给自己的产品页面定义的最大的宽度和最小宽度分别是：

{
    max-width:640px;
    min-width:320px;
}

5.去掉 a，input 在移动端浏览器中的默认样式

1.禁止 a 标签背