移动端布局

百分比弹性布局

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

移动端布局的优缺点

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

新单位 rem
rem是永远获取html的font-size值
然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值

w,vh 永远获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
要移动端尺寸显示正常需要加上以下meta

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>