移动端笔记系列2--移动端样式和布局的坑
2016-09-29 13:09
411 查看
前言
为了兼容各种手机系统的样式,我们需要重置一下移动端的样式。关于样式
为了统一页面的显示,所以要清除移动端各种手机或系统的默认样式,具体得看公司和产品的需求了,当然,没有什么要求的话只用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框架
相关文章推荐
- 移动端开发系列笔记(2)—— 移动端特别样式处理
- 移动端重构系列3——整体布局
- 系列文章--精通CSS.DIV网页样式与布局学习
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
- [学习笔记]android:系列样式大全
- CSS3学习系列之布局样式(二)
- CSS3学习系列之布局样式(一)
- DIV+CSS笔记:第五课 先布局,再样式
- 移动端爬坑记 --- (1)布局与样式上的奇葩偶遇
- 移动端新布局样式 flexbox
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
- 移动端重构系列3——整体布局
- 移动端重构系列3——重置样式
- 移动端笔记系列1--认识移动端的开发
- 移动端rem布局导致页面加载瞬间无样式
- 精通CSS(7.1对数据表格应用样式&7.2简单的表单布局)&R语言课堂笔记(王中贤老师)
- 移动端重构系列2——整体布局(转载)
- 精通移动端布局系列
- 移动端重构系列4——重置样式