https://www.bilibili.com/video/BV19R4y1o7HD/?vd_source=d10c649e248b08f4441d8cd6b76f46fc

千锋教育前端响应式布局项目教程，3小时带你用html+css完成响应式布局网页设计项目

P1学习常见问题解惑

P2 001-章节简介

P3 002-相对单位之vw与vh

视口
在PC端，视口指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport（布局视口）。

vw vh vmin vmax

区别
1.百分比是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。
2.在百分比与vw获取的都是页面宽高时，视口单位优势在于【vh】能够直接获取高度，而用%在没有设置 body 高度情况下，是无法正确获得可视区域的高度。
3.当页面有滚动条时，在百分比与ww获取的都是相同宽高时，100%是不包含滚动条的，100vw是包含滚动条的宽度/高度。

375 =100vw

P4 003-相对单位之em与rem

em em是font size of the element的简称，是指相对于父元素的字体大小的单位。
em 单位的主要问题是它们与元素的字体大小有关。因此，它们可能会层叠起来并导致意想不到的结果。

html font-size:100%; 是16px;

rem rem是font size of the root element的简称，是指相对于根元素的字体大小的单位。
在根元素的font-size属性中指定时，rem单位是指属性的初始值这意味着1rem等于html元素的字体大小（对于大多数浏览器而言，默认值16px)

正如我们看到的那样，这些值在计算起来非常不方便。因此，我们可以使用一个叫 62.5 的方式来解决这个问题。

P5 004-媒体查询语法

all
适用于所有设备
print
适用于在打印预览的模式下
screen
主要用于屏幕
speech
主要用于语音合成器

width viewport的宽度，有 max-width 与 min-width。
height viewport的高度，有max-height与 min-height
aspect-ratio viewport的宽高比
orientation viewport的旋转方向，有 portrait（竖屏）与 landscape（横屏）两种

and用于将多个媒体查询规则组合成单条媒体查询
not用于否定媒体查询，如果不满足这个条件则执行内容，否则将不执行
only 用于旧版浏览器识别媒体类型使用
逗号 用于将多个媒体查询合并为一个规则

@media not screen,print and (max-width:1200px) and (min-width:600px){
	p{}
}

<link rel="stylesheet" href="css/a.css" media="(orientation:portrait)">
<link rel="stylesheet" href="css/b.css" media="(orientation:landscape)">

P6 005-响应断点（阈值）的设定

pc 1024+

ipad 1023-768

iphone 767-320

P7 006-项目头部模块
P8 007-项目内容一模块0
P9 008-项目内容二模块
P10 009-项目内容模块三
P11 010-项目内容模块四

图片 pc完整 移动中心/别一个图