1 piexl 像素知识
640 * 1136 的图片能不能在 iphone5 上完全展示?
iphone5 分辨率 640*1136
逻辑像素与物理像素的关系
px 逻辑像素: 浏览器使用的抽象单位
dp,pt 物理像素: 设备无关像素
dpr: 设备像素缩放比
计算公式: 1px = (dpr)^2 * dp
iphone5 的 dpr = 2;
DPI: 打印机每英寸可以喷的墨汁点 (印刷行业)
PPI: 屏幕每英寸的像素数量, 即单位英寸内的像素密度
目前, 在计算机显示设备参数描述上, 二者意思一致
计算公式: 以 iphone5 为例: ppi = (1136^2 + 640^2)/4 = 326ppi(视网膜 retina 屏)
注意: 单位为硬件像素 (物理像素), 非 px
PPI 越高, 像素数越高, 图像越清晰但可视度月低 (小), 系统默认缩放比越大
retina 屏 (高清屏):dpr 都是 >=2
2 viewport
手机浏览器默认为我们做了两件事情:
页面渲染在一个 980px(ios) 的 viewport
缩放
为什么要有 viewport?
一个 300 多像素的屏幕, 放一个 1000 多像素的页面, 会混乱, 所以要先虚拟一个 980 像素的页面, 然后进行缩放
度量 | 视口 visual viewport ==== 窗口缩放 scale
布局 layout viewport
设计移动 web, 为什么不使用默认的 980px 的布局 viewport?
宽度不可控制, 不同系统的设备默认值都可能不同
页面缩小版显示, 交互不友好
链接不可点
有缩放, 缩放后又有滚动
font-size 为 40px 等于 pc 上 12px 同等物理大小, 不规范
3 meta 标签
移动 web 最佳 viewport 设置: 布局 viewport = 设备宽度 = 度量 viewport
4 设计移动 web
方案一: 根据设备的实际宽度来设计 (常用)(不缩放)
手机宽 320px, 我们就拿 320px 设计
方案二: 1px = 1dp, 易解决高清问题
缩放 0.5 根据设备的物理像素 dp 等于抽象像素 px 来设计 1px 像素边框和高清图片都不需要额外处理
以方案一为例, 将 pc 端页面改成适应移动端的页面:
在移动开发过程中要学会做减法, 一些不太重要的东西可以隐藏起来
5 使用什么布局?
很多网站都是使用固定布局, 以前凡客淘宝也有段时间使用过流式布局, 现在都改成固定布局
但是固定布局不适合移动开发
可以使用
响应式布局: responsive 高清图片 retina px em rem
flex 弹性盒子布局: 高效居中方案 等比例填充列行 background-size font-size 多行文本溢出
6 flexbox 弹性盒子布局
根据元素个数不同, 自动填充
display:-webkit-flex; 表示使用弹性布局
子元素设置 flex:num; 占容器的比例
划分方式:
来源: http://www.cnblogs.com/xsilence/p/5774737.html