meta视口标签-多倍图-背景缩放background-size-CSS3盒子模型-特殊样式-流式布局-二倍精灵图做法

2.5 meta视口标签

属性 解释说明
width 宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale 初始缩放比,大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户是否可以缩放,yes或no(1或0)
3.2 多倍图
可以放入实际大小两倍的图,否则会造成图片模糊
手机通常使用二倍图,还存在3倍/4倍图,看实际需求
3.3 背景缩放background-size
background-size: 图片的宽度 图片的高度;
background-size: 500px 200px;
1.只写一个参数 肯定是宽度 高度省略了 会等比例缩放
background-size: 500px;
2.里面的单位可以跟% 相对于父盒子来说的
background-size: 50%;
3.cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全
background-size: cover;
4.contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸 有可能部分空白区域
background-size: contain;
5. 移动端技术解决方案
5.2 CSS初始化 normalize.css
http://necolas.github.io/normalize.css/
5.3 CSS3盒子模型 box-sizing
CSS3盒子模型不会因为border padding撑大盒子
CSS3盒子模型
box-sizing:border-box;
传统盒子模型
box-sizing:content-box;
传统 or CSS3盒子模型?
移动端可以全部CSS3盒子模型
PC端如果要完全兼容,就传统,不考虑兼容性,就CSS3盒子模型
5.4 特殊样式
CSS3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
点击高亮我们需要清除 设置为transparent 完成透明
-webkit-tap-highlight-color: transparent;
在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance: none;
禁用长按页面时的弹出菜单
img,a { -webkit-touch-callout:none; }
6. 移动端常见布局
6.1 流式布局(百分比布局/非固定像素布局)
通过盒子的宽度设置成百分比根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
max-width 最大宽度 (max-height 最大高度)
min-width 最小宽度 (min-height 最小高度)
5.二倍精灵图做法
在firework里面把精灵图等比例缩放为原来的一半(我用的ps)
根据大小测量坐标
注意代码里面的background-size也要写:精灵图原来宽度的一半