移动布局
‘
1.移动设备 手机和ipad
安卓系统 ios系统
安卓系统 内置浏览器是谷歌 ios内置 safari 浏览器 他们的内核都是webkit 不考虑兼容性 需要考虑的是安卓和ios的区别
2.布局
设备宽度 设备的实际大小 设备的分辨率 厂家给的
页面大小
浏览器的视口 浏览器自带的document.documentElement.clientWidth查看一般 默认的移动端口是980；；
例子 设备宽是320 页面宽是1200 浏览器视口是980px 三种不统一 浏览器的视口会自动缩放 以100%完整展示页面 但是就会变得不清楚 特别挤
我们需要把这三个变的统一。
1.移动设备宽(320)和浏览器视口宽(980)一致
在head之间加一个meta标签 name="viewport"
设备宽度和浏览器视口一致时，如果页面宽大于这个数字就会出现滚动条
2.当移动设备和浏览器视口一致时/如果还使用以前的布 如果页面超过设备宽 超过的部分会被截掉 不能使用传统的开发模式
1.弹性布局
分两部分 弹性父级 弹性子元素
给父级设置display:flex;display:inlineflex;
flex-direction 指定弹性盒子中子元素的排列方式
流式布局(百分百布局)
响应式布局
rem 布局