一,媒体查询(响应式布局)
通过媒体查询设置不同的设备或尺寸(设置不同的断点)添加对应的样式布局效果,使用媒体查询功能。
集中创建页面的图片排版大小,可以智能的根据用户行为以及使用的设备环境(系统平台,屏幕尺寸,屏幕定向等)进行响应式布局。
link写法:
<link rel="stylesheet" type="text/css" href="css.css" media="(min-width:300px) and (max-width:600px)"/>
<link rel="stylesheet" type="text/css" href="css1.css" media="(min-width:600px) and (max-width:900px)"/>
大于等于min-width时应用对应css效果
@media only screen and (min-width:300px){
body{
background:#ff0;
}
}
大于等于min-width,小于等于max-width时,应用对应css效果
@media only screen and (min-width:300px) and (max-width:300px){
body{
background:#f0f;
}
}
横屏竖屏
@media all and (orientation:portrait){
body{
background:#f0f;
}
}
@media all and (orientation:landscape){
body{
background:#f0f;
}
}
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
二,移动端布局
移动端屏幕尺寸,是对角线的长度,单位是英寸(1英寸=2.54厘米)。
网页重构中的px不一定是和屏幕分辨率的px一样大小。
DPR设备像素比:设备像素和css像素的比值。
单位:
px:固定长度单位
vw:视窗宽度的百分比
vh:视窗高度的百分比
em:根据父元素的font-size的值计算
rem:根据根标签html的font-size的值计算
vmin:vw和vh中较小的那一个
vmax:vw和vh中较大的那一个
如果设计师给的设计稿如果是640px宽,那需要在320px的设备宽度去显示(dpr的比值是2),那么此时1vw=3.2px,如果html的font-size值为100px,此时100px里有多少个3.2,就是多少vw 。100/32=31.25vw
流式布局
用vw和rem来适应不同的尺寸(26.667vw,31.25vw)
html,body{
height:100%;
}
html{
font-size:31.25vw;
}
body{
display:flex;
flex-direction:column;
font-size:16px;
}
header{
height:0.44rem;
}
section{
flex:1;
overflow:auto;
}
footer{
height:0.44rem;
}
百分百布局 (弹性控件)
等比缩放(rem)布局
grid布局(网格布局)
div{
display:grid/inline‐grid
}
设置网格的每一列的列宽度(单位可以是px也可以是百分百)
grid‐template‐columns: repeat(3, 33.33%)
grid‐template‐columns: 100px 200px 100px;
grid‐template‐columns: repeat(4,1fr)
设置网格的每一行的行高
grid‐template‐rows:
grid‐template‐rows: 100px 100px 100px;
grid‐template‐rows:repeat(4,1fr);
grid‐template‐columns: 150px 1fr 2fr;
.container {
display: grid;
grid‐template‐columns: repeat(auto‐fill, 100px);
}
grid‐template‐areas:
"b1 b2 b2 b3"
"b4 b2 b2 b5"
"b6 b7 b8 b5"
"b6 b9 b9 b9";
place-items:place-items属性是align-items属性和justify-items属性的合并简写形式,
设置单元格内容在水平垂直的对齐方式。
justify‐items/align‐items: start | end | center | stretch;
place-content属性是align-content属性和justify-content属性的合并简写形式。设置整
个内容区域在容器里面的水平和垂直位置
place‐content: <align‐content> <justify‐content>。
justify‐content/align‐content: start | end | center | stretch | space‐around | space‐between | space‐evenly;
grid-area属性指定项目放在哪一个区域
grid-area:a1;或者grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid和弹性布局的区别
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。