用媒体查询实现响应式布局

@media空格设备类型 {元素{属性：值;}}

screen表示电子屏幕
print表示打印机屏幕
所有设备使用媒体查询可以用@media all

@media空格and空格（你想要加的条件）{元素{属性：值;}}

常见的条件有max-width表示小于等于这个宽度的时候做什么
min-width表示大于等于这个宽度的时候做什么

条件是可以叠加的哇，记住and的左右都有空格哦

设置color颜色时要注意，颜色是可以被body里面的子元素继承的
但是如果子元素有自己的颜色，就会使用自己的颜色

如果写了两条响应式但是条件相反，谁在下面谁算数

----------------------------------------------------------------------------------------------------------

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta ：vp 理想、标准视口 content=显示的宽度为设备的宽度，是否对屏幕的尺寸进行缩放，1.0表示不缩放

在移动端这个语句很重要哦

使用物理单位px在不同宽度和不同分辨率的手机上会有一定的差异，为了避免我们会使用em或rem做为移动端的单位，但是em相对父元素大小显示，所以还是rem经常做为移动端的单位
不同浏览器根元素的默认大小大小不一致，所以我们要手动设置

假如手动设置html的font-size为10px，那么接下来写的1rem就是10px了

我们做的效果在不同的屏幕尺寸当中有不同样式
浏览器有默认最小尺寸就算你设置的比它低显示的还是浏览器最小的大小
<link rel="stylesheet" href="./1.css"> 后面可以设置media=“screen and （max-width：600px）：当屏幕小于600添加这些样式”
screen前面可以加only ：仅在电脑屏幕或移动设备下，其他设备屏幕无效
使用的环境是：不同的屏幕需要显示不同的样式Css需要写很多的情况下可以这么写就可以调用多套样式了

———————————————————————————————————————————

小练习~

需求说明 通过 flex 布局，完成导航栏目布局效果 通过 flex 实现垂直居中,具体效果如下：

页面宽度大于 600px 小于 800px 的时候，容器属性变为justify-content: space-around，显示效果如下：

页面宽度宽度小于 600px 的时候自动换行，显示效果如下

 拯救世界什么的还不如睡觉呢

呼呼