全球手机浏览的使用量逐渐上升,IE6的使用逐渐下降,越来越多的人使用小屏幕设备上网,而不同屏幕的手机,pad视口的大小不一样,所以像pc端固定min-width的960px不能在移动端适应,所以一般都会用到响应式布局,我总结了一下经常用到的响应式布局.
一、flex弹性布局
.contain{
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
border:1pxsolid red;
display:flex;
}
.d1,.d2,.d3,.d4{
border: 2px solid blue;
flex:2;
}
<divclass="contain">
<divclass="d1">第一部分</div>
<divclass="d2">第二部分</div>
<divclass="d3">第三部分</div>
<divclass="d4"></div>
</div>
任何容器都能指定为flex容器,所以子元素就是容器成员。Flex容器存在两根轴,主轴和交叉轴。
Flex容器的属性有:
flex-direction:决定主轴的的排列方向(row|row-reverse|column|column-reverse)
flex-wrap:如何换行(nowrap|wrap|wrap-reverse)
flex-flow:是flex-direction和flex-wrap的缩写
justify-content:在主轴上对齐的方式,如下属性
§ flex-start(默认值):左对齐
§ flex-end:右对齐
§ center:居中
§ space-between:两端对齐,项目之间的间隔都相等。
§ space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
Align-items:在交叉轴上如何对齐
§ flex-start:交叉轴的起点对齐。
§ flex-end:交叉轴的终点对齐。
§ center:交叉轴的中点对齐。
§ baseline: 项目的第一行文字的基线对齐。
§ stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
子元素的属性:
Order:子元素的排列顺序,数字越小越靠前,默认为0;
Flex-grow:数字,属性的放大比列,默认为0
Flex-shrink:子元素的缩小比例,默认为1,如果空间不足,该项目将缩写。
Flex-basis:子元素的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
Flex:flex-grow,flex-shrink,flex-basis的缩写
Align-self:覆盖flex容器align-items属性,允许有自己的对齐方式
二、媒体查询和百分比的结合使用
@media screen and (max-width: 768px){
.contain{
max-width:760px;
border: 1px solid red;
}
}
@media screen and (min-width: 326px){
.contain{
max-width:320px;
border: 1px solid blue;
}
}
.d1,.d2,.d3{
width:31%;
border: 1px solid yellow;
float:left;
}
.d4{
clear:both;
}