响应式布局，移动端布局

一，媒体查询（响应式布局）

通过媒体查询设置不同的设备或尺寸（设置不同的断点）添加对应的样式布局效果，使用媒体查询功能。
集中创建页面的图片排版大小，可以智能的根据用户行为以及使用的设备环境（系统平台，屏幕尺寸，屏幕定向等）进行响应式布局。

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 布局强大。

Shirley_0513

发布了33 篇原创文章 · 获赞 57 · 访问量 1659

私信关注