移动布局

Posted 2021-11-28 wwwzhaocom

当移动设备和浏览器视口一致时，如果使用以前布局，如果页面超过设备宽，超过的部分就会被裁掉，所以，不能使用传统的页面开发模式，

　　可以使用弹性布局，流式布局（百分百布局），响应式布局，rem布局　　

弹性布局：

　　　　1.分两部分：弹性父级，弹性子元素；

　　　　2.给父级设置display:flex/inline-flex     兼容性  display:-webkit-flex;

　　　　弹性父级可以设置的属性：flex-direction：指定弹性盒子中子元素的排列方式；

　　　　属性值：row(默认：右对齐)    row-reverse(左对齐)    column（从上到下） column-reverse（从下到上）

　　　　属性：justify-countent 文本的对齐方式的属性

　　　　属性值：flex-start（左对齐）　　flex-end（右对齐）　　center（居中）   space-between平均分布该行，没有间隔；   space-around 平均分布改行，两边有间隙；

　　

属性：align-items　专门调子元素行高位置；  常用的属性值：center 居中

　　　　属性：flex-wrap   子元素的换行方式，  常用属性值：wrap

　　　　属性：align-content   设置多行对齐：  属性值：center 各行弹性容器向中间的位置堆叠

　　　　子元素上的  属性：order   排列       属性值：数字，      数字越小，排的越靠前；     

　　　　子元素上的  属性：flex    占的份数    属性值：数字，     代表他占弹性父级的份数

　　　　注：

　　　　　移动设备宽和浏览器视口的宽一致；

　　　　　在head之间加一个meta标签

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