我们常说的响应式布局就是一个网站,既可以在PC端显示,也可以在移动端显示(一个网站,可在多个终端显示),一般是通过媒体查询加rem来实现的.
是一个css的语法，可以根据不同的分辨率大小，设置不同的样式
固定语法：
@media screen and (条件){ 写你希望在这个屏幕大小下的样式代码 }屏幕大小判断可以使用的条件有：
width 屏幕大小=指定大小时生效 max-width 屏幕大小<=你指定大小时生效 min-width 屏幕大小>=你指定大小时生效如果有屏幕大小区间重合，以优先级高的为准
附上代码
<style> /* 如果是分辨率小于 768 的移动设备，让body的颜色是红色 */ @media screen and (max-width: 768px) { body { background-color: red; } } /* 如果是大于 768 的设备，让body的颜色是绿色 */ @media screen and (min-width: 768px) { body { background-color: green; } } /* 留意这里有屏幕大小区间重合即768px，以优先级高的为准 即当屏幕大小为768px时, 写在后面的绿色样式优先级更高一些*/ </style>媒体查询的大小跟类型
媒体查询在前端一般就只是使用来判断屏幕大小，但是事实上，媒体查询所能查询的媒体类型不仅仅只有屏幕,还有下面这些
大小判断还可以判断高度，视口大小，还可判断视口的比例等等
媒体查询里面有一些关键字
and 这个是最常用，通常就是用来连接多个条件
or 这个作用和并集很类似，让我们一段代码，可以共用
not 表示把条件取反，这个一般很少用
only 用来处理兼容的，表示仅仅在当前这个条件下生效
rem是css3里面推出的一个新的相对长度单位，它的相对基准是根元素(html)里面的font-size
作用----能够根据html根元素的font-size进行大小的自动转换,可以用来配合媒体查询实现不同屏幕大小的效果适配。
如果你的html里面设置的font-size是12px，一个rem的大小就是12px
例如实现需求:一个盒子，当 在 375 的屏下的时候，宽高是 200 x 200 ;当在700的屏幕下的时候，宽高是 400 x 400
html
<body> <div class="box"></div> </body>css
/* 当在375的屏幕下的时候，盒子宽高是 400 x 400 */ @media screen and (width: 375px) { html{ /* 这里1rem = 20px 20*10=200 */ font-size: 20px; } } /* 当在700的屏幕下的时候，盒子宽高是 400 x 400 */ @media screen and (width: 700px) { html{ /* 这里1rem = 40px 40*10=400 */ font-size: 40px; } } .box{ width: 10rem; height: 10rem; background: pink; }