移动端
一、视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。
- 布局视口 layout viewport
- 视觉视口 visual viewport
- 理想视口 ideal viewport (meta视口)
meta视口:
布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽。
语法:
属性 | 解释说明 |
---|---|
width | 宽度设置的是viewport(视口)宽度,可以设置device-width特殊值 |
initial-scale | 初始缩放比,大一0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes或no (1或0) |
标准的viewport设置:
- 视口宽度和设备一致
- 视口的默认缩放比例是1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
二、二倍图
物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
- 我们开发时候的1px不是一定等于1个物理像素的
- PC端页面, 1个px等于1个物理像素,但是移动端就不尽相同
- 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
多倍图
- 对于一张50px* 50px的图片,在手机Retina屏中打开.按照刚才的物理像素比会放大倍数,这样会造成图片模糊
- 在标准的viewport设置 中.使用倍图来提高图片质量.解决在高清设备中的模糊问题
- 通常使用二倍图,因为iPhone 6\7\8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
- 背景图片 注意缩放问题
背景缩放 background-size
语法:background-size:背景图片宽度 背景图片高度;
注:
- 单位:长度|百分比|cover|contain;
- cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
- contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
多倍图切图
使用cutterman插件
三、移动端开发选择
移动端主流方案
- 单独制作移动端页面(主流)
- 响应式页面兼容移动(其次)
四、移动端技术解决方案
1.移动端浏览器
移动端浏览器基本以webkit内核为主。因此我们就考虑webkit兼容性问题。 我们可以放心使用H5标签和CSS3样式。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可
2.CSS初始化 normalize.css
- Normalize.css:保护了有价值的默认值
- Normalize.css:修复了浏览器的BUG
- Normalize.css:使模块化的
- Normalize.css:拥有详细的文档
官网地址:http://necolas.github.io/normalize.css/
3.CSS3 盒子模型
CSS3 盒子模型:box-sizing:content-box;
区别于传统盒子模型(box-sizing:border-box;)
4.特殊样式
1.清除点击时的高亮
-webkit-tap-highlight-color:transparent;
2.在移动端浏览器默认的外在IOS上加上这个属性才能给按钮和输入框定义样式
-webkit-appearance:none;
3.禁用长按页面时的弹出菜单
img,a { -webkit-touch-callout: none; }