码迷,mamicode.com
首页 > 移动开发 > 详细

移动布局

时间:2019-05-07 21:23:00      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:兼容   方式   开发   cti   弹性布局   布局   tar   end   rev   

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

  可以使用弹性布局,流式布局(百分百布局),响应式布局,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">

移动布局

标签:兼容   方式   开发   cti   弹性布局   布局   tar   end   rev   

原文地址:https://www.cnblogs.com/wwwzhaocom/p/10827964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!