一、移动端
1.什么是移动端？
可以移动得设备被称之为移动端，手机，平板，手表，都可以称之为移动端设备。
2.移动端项目效果如何测试查看？
在浏览器中，按Fn+F12或者右键页面点击检查，打开控制台后激活左上角蓝色小手机。
3.设备模拟器中包含的功能
(1)切换不同手机型号
(2)最佳观看比例
(3)该手机型号的逻辑像素
(4)右上角三个点可以调出标尺、dpr、设备类型及进行屏幕截图。
4.物理像素（设备像素）
物理像素就是手机屏幕上的像素点，这些像素点在手机出厂时就已经固定了，他是真实存在的像素。
5.逻辑像素（css像素）
在开发页面我们所书写和参考的像素，他是在web编程时的一个虚拟概念像素。
6.设备像素比(dpr)
物理像素和逻辑像素之间的比值。
7.视网膜高清显示屏
在最开始时，是没有物理像素和逻辑像素之分的，但是随着技术的发展，手机屏幕分辨率越来越高。从iphone4开始，提出了一个高清视网膜显示屏的概念，在相同的屏幕大小内，物理像素点多了一倍，这个时候，开始用多个物理像素点来解析一个css像素。
8.为什么学习物理像素、逻辑像素、设备像素比？
目的是为了在拿到图纸后，根据量出的大小，换算我们要去书写的逻辑像素进行开发。
9.布局视口
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。一般ios和安卓都会把布局视口定义980px;他是为了解决早期pc端在浏览器上的显示问题而产生的。所以一般pc端页面在移动端上也能显示出来，只是元素显得有点小，而且可以通过手指进行缩放。
10.视觉视口
视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。即用户在移动端看页面时，通过手机窗口看到的区域大小。
11.理想视口
理想视口是指对设备来讲最理想的视口尺寸。需要通过手动添加meta标签来实现，让布局视口和视觉视口大小保持一致。简单的说就是设备多宽我页面多宽。
12.如何设置理想视口
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
13.移动端布局流程
<1>确认设计图出自哪个设备————确认设备像素比dpr
<2>通过设备像素比和量出来的尺寸————确认逻辑像素（css像素）
<3>引入理想视口（meta标签）
<4>引入相关文件和资源，重置默认样式，开始书写样式。
二、移动端布局的几种方式
1.px固定布局 （不推荐） 不能实现多种设备的适配
以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
通过量取出来的尺寸，经过换算，直接书写页面。
2.响应式布局 (不怎么使用，原因请看优劣势)
优势:
(1)面对不同分辨率设备灵活性强
(2)能够快捷解决多设备显示适应问题
劣势:
(1)其实他是一个折中方案，为了照顾另一端的展示效果，而在pc端和移动端上都无法达到最佳展示效果。
(2)代码累赘臃肿，出现隐藏无用的元素(pc端上藏移动端需要的元素，移动端藏pc端需要的元素)，加载时间加长
(3)兼容各种设备工作量大,其实他还是需要根据不同的设备宽度来写几套不同的css,任务量其实总体没有减少,效率低下
(4)html结构总体不变，但是需要写pc端和移动端效果，限制较大，增加开发难度和设计难度。
3.弹性布局
4.等比缩放布局
5.混合布局（弹性布局+等比缩放布局）
三、如何实现响应式布局——————媒体查询
1.概念:媒体查询可以让我们根据设备显示器的特性为其设定CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
2.媒体查询操作方式
书写表达式和查询设备条件，如果都满足则执行为其设置的css,如果不满足则忽略这些css。
3.基础结构
@media all and (min-width:320px) {
body { background-color:blue;}
}
4.支持设备类型（详细请看课件）
开发中主要使用以下几种
all 所有类型
handled 移动端
screen 前端所有的设备类型（pc、移动、显示屏、笔记本等）
5.关键字 and not only
6.几种关键的设备类型媒体查询
<1>手机等小屏幕手持设备
@media screen and (min-width: 320px) and (max-width: 480px) {}
<2> 平板之类的宽度1024以下设备
@media only screen and (min-width: 321px) and (max-width: 1024px) {}
<3>PC客户端或大屏幕设备:1028px至更大
@media only screen and (min-width: 1029px) {}
<4> 竖屏
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
<5>横屏
@media screen and (orientation:landscape){对应样式}
注意：默认样式写在最上边
一、移动端几种常用布局方式
1.弹性布局
页面多出现百分比和flex布局。可以一定范围内适配所有尺寸的设备屏幕及浏览器宽度。
特点：
(1)页面多出现百分比和flex
(2)关键的模块高度固定，宽度伸缩
(3)两侧重要模块写固定大小，中间空白区域伸缩有弹性,中间这块尽量写flex:1和百分比。
(4)图片宽度写百分比大小，高度不写。让他根据宽度大小自适应。放图片的父元素盒子也不要写固定的高度。
(5)文字流式。不要写宽高。
2.等比缩放布局 弊端：字体大小如果不去单独设置的话，会显得很难看。
(1)媒体查询+rem实现等比缩放布局
可以实现等比缩放。但是需要达到触发条件，并不是实时的等比缩放。一般不考虑
(2)rem+vw实现等比缩放布局
思考：
<1>移动端我们是该关注宽度大小变化还是高度变化？
——宽度，高度变了就变了呗，纵向我们让中间内容区域滚动就好了。
<2>rem为相对根元素字体大小，1vw为窗口宽度的百分之1,如果我们将vw作为根元素字体大小会发生什么？
——等比缩放布局。假设你的屏幕大小为380px,这个时候1vw=3.8px;现在改变你的
屏幕大小，你的屏幕宽度为320px,那么这个时候1vw=3.2px;这个时候如果我们将
根元素html的字体大小的单位设置为vw,那么我们如果页面布局中全部使用rem作为
单位，当页面宽度发生变化时，根元素字体大小也会相应的变化，我们就能够实现等比缩放。
<3>关于如何计算根元素字体大小设置为多少vw
假设设计图宽640px
那么逻辑像素为320px
我们想要1rem=100px;
又因为逻辑像素总体宽度为320px 所以 1vw=3.2px;
求 1rem=?vw;
1rem=100px 3.2px=1vw;那么我们算出来100px=?vw，就能求出1rem=?vw; 1rem=100px=?vw;
所以 1rem=31.25vw;
*<4>求根元素字体大小万能公式 (设置后，设计图量多少写多少)
html{
font-size:(10000/设计图大小)vw;
}
求解过程：
假设设计图为828px
我们想要828px的设计图在任何屏幕宽度内都是满屏效果
那么我们得知 828px=100vw;
又因为我们想要 1rem=100px;
求1rem=?vw;
828px=100vw; 等号两边同时除8.28 100px=100/8.28vw
那么 1rem=100px=100/8.28vw;
那么 1rem=100/8.28vw; 分子分母同乘100 1rem=10000/828vw;
3.混合布局（等比缩放和弹性布局混着用）
其实就是rem+vw+等比缩放布局。
等比缩放布局中，个别部分区域，我们需要给他写上一个固定的大小。之前我们都是用px,
现在我们可以在设置根元素字体大小xxxvw后，使用单位rem。每个模块的字体大小也用rem作为单位。
这个时候，如果页面在缩小，会显得更有弹性，并且字体也会随着页面的缩小而缩小。
二、页面开发单位
1.px 逻辑像素(css像素)大小
2.em 相对父元素字体大小
3.rem 相对根元素字体大小 根元素——html
4.vw vw为视窗宽度 1vw为视窗宽度的百分之1
5.vh vh为视窗高度 1vh为视窗高度的百分之1
6.100vw、100vh和100%之间的区别？
答:100vw和100vh是占据页面窗口的全部，他们的参照物是视窗，也就是页面窗口。100%是占据父元素大小的全部，如果父元素只有400，他就占400，参照物是父元素，所有，100%和100vw、100vh有本质区别。
一、网格布局 grid
1.含义:它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
2.grid布局和flex布局之间的区别？
(1)相同点:都可以指定父元素内部内部多个子元素的位置。
(2)不同点：
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
3.grid内部各项的概念(容器、项目、行、列、单元格、网格线)
(1)容器：一个案例中最大的盒子，可以理解成父元素。即写了display:grid的元素。
(2)项目:一个案例中的，最大盒子里面的内容，可以理解成子元素.即写了display:grid元素的子元素。
(3)行和列：容器里面的水平区域称为"行"，垂直区域称为"列"。
(4)单元格：行和列的交叉区域，称为"单元格"。
(5)网格线：划分单元格的线叫做网格线。水平的网格线划分行，垂直的网格线划分列。
(6)网格线的规律:
<1>1行2列 两横三竖
<2>2行1列 三横两竖
<3>2行2列 三横三竖
<4>n行n列 n+1横n+1竖
4.grid布局的属性
(1)属性分类：网格布局可以分为两类，一类为容器属性，一类为项目属性
(2)容器属性(写给父元素的属性)
1.触发网格布局 display:grid;
grid 触发网格布局
inline-grid 触发网格布局，容器变为行内块元素
2.行列划分
——(1)grid-template-rows 划分行
——(2)grid-template-columns 划分列
——(3)案例: 3行3列
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px;
——(4)特性：可以定义多个属性值，有几个属性值划分几行或几列，每个参数为行或列的大小。
分不下会溢出，分不完会有剩余空间。每个子元素都会按顺序出现在网格内。子元素
不写大小，会默认占据此单元格的全部空间。
——(5)属性值:
——《1》像素取值 100px 100px 100px;
——《2》百分比取值 33.3% 33.3% 33.3%;
——《3》关键词auto 20% auto 30%; (auto会去自动分配剩余空间)
——《4》功能函数 repeat(5,20%); repeat()内第一个值为平铺次数，第二组参数为每次平铺需要平铺的值。
——《5》关键词 auto-fill (需要搭配repeat()使用，一般当做repeat的第一个值，根据第二个值来决定平铺几次)
——《6》关键词fr 1fr 2fr 3fr 将大小划分多份，每个参数为每份所占份额。
——《7》功能函数minmax() 规定行或列的最大最小值
——《8》划分网格线 案例如下： (一般此属性搭配项目属性grid-row和grid-column一起使用)
grid-template-rows:[x1] 100px [x2] 100px [x3] 100px [x4] ;
grid-template-columns:[y1] 100px [y2] 100px [y3] 100px [y4];
3.指定区域 grid-template-areas (一般搭配grid-area使用)
案例: grid-template-areas:
"a a b"
"c c b"
"c c d";
注意事项:划分区域时，只能是长方形和正方形，不能斜着来组成三角形或者梯形。可以用"."作为占位符使用，
使用"."的区域，不再使用。而且"."可以斜着用。
4.项目的排列方向 grid-auto-flow
row 子项优先沿着行排列(默认值)
column 子项优先沿着列排列
5.项目单元格对齐方式
justify-items
start 横向开始地方对齐
end 横向结束地方对齐
center 居中
stretch 拉伸铺满(默认值，但是子项如果写宽，此特性不显示)
align-items
start 纵向开始地方对齐
end 纵向结束地方对齐
center 居中
stretch 拉伸铺满(默认值，但是子项如果写高，此特性不显示)
*place-items:垂直 水平; 项目单元格对齐方式复写形式
6.项目单元格整体对齐方式
justify-content 整体水平对齐方式
align-content 整体垂直对齐方式
*place-content:垂直 水平; 项目单元格整体对齐方式复写形式
start 开始地方对齐
end 结束地方对齐
center 居中对齐
space-around 环绕式分布
space-between 两端分布
7.行列间距 (此属性不要和palce-content一起使用)
grid-row-gap 网格行与行之间的间距
grid-column-gap 网格列与列之间的间距
*grid-gap:行间距 列间距; 复写形式，网格行列之间的间距
(4).项目属性
(1)grid-row:x1/x2 (复写属性) 斜杠之前为开始地方的网格线名称，斜杠后为结束地方网格线名称。
等价于一下两个属性
grid-row-start 开始地方的网格线名称
grid-row-end 结束地方网格线名称
(2)grid-column:y1/y2 (复写属性) 斜杠之前为开始地方的网格线名称，斜杠后为结束地方网格线名称。
grid-column-start 开始地方的网格线名称
grid-column-end 结束地方网格线名称
(3)grid-area 项目所占的区域