H5 移动端布局

Posted 2021-11-28 yangzhiqiang

在开始移动端布局前要先了解一下设备宽度，页面大小，浏览器视口三者之间的区别

　　设备宽度：实物设备的大小，设备的分辨率，具体数据是设备生产的厂家给的。

　　页面大小：设计稿上规定的页面的宽度和高度

　　浏览器视口：浏览器自带的用document.documentElement.clientWidth查看，在移动设备上如果不做视口处理一般默认是980

在写移动端的时候，我们需要将这三者统一：

　　1.将设备宽与浏览器窗口统一

　　在head之间加一个meta标签 name=“viewport”，代码如下

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

　　2.当设备宽与浏览器窗口一致了，如果还使用原来的页面布局方式，当页面的宽超出设备的宽时，超出的部分会被截掉。不能使用传统的页面开发模式了。我们就引入了新的布局方式：

　　　　1.弹性布局（弹性盒子）

　　　　　　1.分俩部分  弹性父级   弹性子元素

　　　　　　2.给父级设置display:flex或inline-flex

　　　　　　 flex-direction 指定弹性盒子中子元素的排列方式，他的值有

　　　　　　　　row：横向从左到右排列（左对齐），默认的排列方式。

　　　　　　　　row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）

　　　　　　　　column：纵向排列。

　　　　　　　　column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

　　　　　　2.流式布局（百分百布局） //待补充

　　　　　　3.响应式布局   //待补充

　　　　　　4.rem布局    //待补充