移动端web开发布局简单介绍(二)之 流体布局

移动端web开发布局简单介绍(二)之 流体布局

什么是流体布局？

• 流式布局，也就是百分比布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受
• 固定像素的限制，内容向两侧填充。
• 为了保护内容在合理的范围内
• Max-width 最大宽
• Min-width 最小宽

CSS3盒子模型

CSS3的盒子模型box-sizing中，盒子的宽度为width已经包含了padding和border，在移动布局中能简化盒子尺寸的计算:
box-sizing: border-box;

一些特殊处理

在移动端，点击高亮的需要清除，设置为transparent 完成透明
-webkit-tap-highlight-color: transparent;
在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance: none;
禁用长按页面时的弹出菜单
img,a { -webkit-touch-callout: none; }