移动web开发两种方案:
- 单独开发(主流)
- 响应式兼容pc和移动端(兼容性问题比较多)
移动端浏览器基本以webkit为主,对h5和css3支持度比较高,同时浏览器私有前缀只要考虑添加webkit即可。
css初始化
使浏览器更一致地渲染所有元素,并符合现代标准。它只针对需要规范化的样式。Normalize.css是重置浏览器元素样式表,Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
特殊样式:
1.CSS3盒子模型
-webkit-box-sizing:border-box;
box-sizing:norder-box;
2.清除点击高亮
* {
-webkit-tap-highlight-color: transparent;
}
3.移动端浏览器默认的外观,在ios上需加这个属性才能给按钮和输入框自定义样式
input {
-webkit-appearance: none;
}
4.禁用长按页面时的弹出菜单
img, a {
-webkit-touch-callout: none;
}
移动端技术选型
单独制作移动端页面(主流)
- 流式布局(百分比布局:通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩)--京东
- flex弹性布局--携程
- less+rem+媒体查询
- 混合布局
响应式页面兼容PC、移动端
- 媒体查询
- bootstrap