HTML（十四）、移动端布局

一、百分比弹性布局

移动端页面基本上和web端区别不大 但要考虑到 移动端屏幕尺寸不大并且都是全屏布局 而且 屏幕尺寸都不一样 所有不能使用网页的固定尺寸来布局 需要使用百分比来布局

二、移动端布局的优缺点

优点：
移动端基本都兼容h5 css3 所有可以放心的去使用css3的样式来布局
移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长
缺点：
移动端宽高尺寸不同 因此测量尺寸成为了一个难题 无法非常精确的写尺寸

因为无法使用使用正常尺寸 不能直接写像素 通常用2种方式来写
新单位 rem
rem是永远获取html的font-size值
例 html{font-size:100px;} 那么所有子元素 1rem=100px;
然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值
(当屏幕尺寸是320px我想设置1rem=10% 那么就设置html的font-size:32px; 通过js来设置 屏幕尺寸除以10)

vw,vh 永远获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
vw,vh是未来的趋势

要移动端尺寸显示正常需要加上以下meta

ppi: 每英寸多少个像素
dpi: 每英寸多少个点

dpr: 物理像素与逻辑像素比例
手机使用的都是逻辑像素
例：iPhone3 iPhone4
物理 320480 物理320480
逻辑 320480 逻辑 640960
dpr=1px dpr=2px