移动端笔记系列2--移动端样式和布局的坑

前言

为了兼容各种手机系统的样式，我们需要重置一下移动端的样式。

关于样式

为了统一页面的显示，所以要清除移动端各种手机或系统的默认样式，具体得看公司和产品的需求了，当然，没有什么要求的话只用normalize.css也是可以的，normalize的功能是保证各个标签在不同浏览器上的表现一致，不完全算重置。下面来介绍样式了。

• -webkit-font-smoothing

    body {-webkit-font-smoothing:antialiased;}

使字体变清晰了。

• -webkit-tap-highlight-color

body {-webkit-tap-highlight-color:rgba(0,0,0,0);}

透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) ,此属性加在body或html都可以。

- -webkit-appearance

.btn {-webkit-appearance: none; }

消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 ,此属性加在button按钮上。


- -webkit-user-select

 body { -webkit-user-select:none; }

禁止页面文字选择,此属性加在body或者html都可以


- -webkit-text-size-adjus

-webkit-text-size-adjust: none;

禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整


- -webkit-touch-callout

-webkit-touch-callout:none

禁用长按页面时的弹出菜单,此属性加在body


- -webkit-overflow-scrolling

    -webkit-overflow-scrolling:touch

局部滚动(仅iOS 5以上支持) ,加在需要局部滚动的容器上


- 移除HTML5 input在type=”number”时的上下小箭头

 在chrome下：
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

Firefox下：
input[type="number"]{-moz-appearance:textfield;}

将type=”number”改为type=”tel”，同样是数字键盘，但是没有箭头。

关于样式就先介绍到这里，我没有过多的收集。

关于布局和样式的坑

flex

典型的底部导航栏就使用到了flex布局，当然也可以用百分比，

.footer_box {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}
.footer_box li {
 -ms-flex: 1;
 flex: 1;
 -webkit-flex: 1;
 -webkit-box-flex: 1;
}

此处要说明一下的坑就是display: -webkit-box;-webkit-box-flex: 1;这个旧语法，如果不加的话，在手机UC浏览器会不兼容，uc不支持新语法。至于前缀加不加就随便了，我用scss写好了

.flex-box {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}

然后用@extend .flex-box; 引入一下就行，当然也可以用自动化构建工具处理。

底部固定的方法

ios中有个坑，Fixed+input（输入框）布局的时候，会出现fixed失效问题，或者有确定按钮固定的底部的需求，如果内容中有input输入框，点击输入框，按钮也会飞到软键盘上面，这样体验也不好，解决办法很多，我向大家介绍一下css+布局的解决办法，js的可以用iscroll.js，ScrollFix.js去解决。

css+布局的解决办法可以看w3plus的底部固定布局.

其他坑

关于其他的坑，相信百度很详尽，我朋友也对此做了一个小汇总，可以去看他文章布局与样式上的奇葩偶遇。

小结

• 这次简单的介绍了一下关于移动端的坑和样式，不能面面独到。
• 之后的章节会介绍移动端的功能效果，和ui框架