响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，移动端开发一套，但只需要一套就可以使用响应式布局了。缺点是CSS比较重。响应式设计和自适应设计的区别：响应式开发一套界面，通过检测viewport的分辨率，在客户端进行代码处理，让不同的客户端显示不同的布局和内容；自适应需要开发多套接口，通过检测视口的分辨率，判断当前访问的设备是PC、平板还是手机，从而请求服务层并返回一个不同的页面。@media(max-width:600px){.contents{flex-direction:column;}}em是根据父元素计算的。Chrome浏览器默认显示最小字体大小为12px。Chrome默认的最小字体大小是12px（最新版的英文也有这个问题），这是Chrome为了更好的显示中文而设计的。但是这样设置为8px字体的元素在Chrome中仍然会显示为12px，会造成网页排版错误的问题。.title{font-size:8px}使用小于默认最小值的字体，通过缩放实现。这里最小字体为12px，仅针对字体。它不应与间距的距离设置混淆。间距的距离设置不是浏览器说明的最小值。使用缩放：transform:scale(0.8);方案一使用rem实现响应式布局。rem单位是相对于根元素html的font-size来确定的。根元素的字体大小相当于提供了一个基准。当页面大小发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会随之改变。因此，如果使用rem实现响应式布局，有两种方式：（1）需要根据视图容器的大小动态改变font-size（而em是相对于父元素的）。(2)使用@media媒体查询根据不同的屏幕类型设置html中的基准字体大小，那么以rem为固定单位的元素的大小也会随之变化。实现原理：默认html中font-size=16px，那么我要设置12px的文字：12÷16=0.75(rem)，也就是在css中，0.75rem其实就是0.75rem*16=12px。1rem是多少px取决于html中的字体有多大。也就是说，rem其实是一个比例大小，所以可以用来实现自适应。当然也可以引入CSS预处理工具（Sass、LESS、Stylus等）来自动计算rem值，这里就不举例了。但是像我这样的懒人或者在团队开发中没有引入CSS预处理工具的人该怎么办呢？我可以移动计算器并玩得开心吗？别担心，您仍然可以解决它。我们把html默认的font-size=10px改一下，是不是好算啊！像这样：html{font-size:62.5%;/*10÷16=62.5%*/font-size:6.25%;/*1÷16=6.25%,此时16px*6.25%=1px,html默认字体大小改为1px*/}body{font-size:12px;font-size:1.2rem;/*12÷10=1.2*/font-size:12rem;/*12px÷1px=12(rem)，也就是让两者在数量上相等，换个单位就行了*/}需要注意的是，为了兼容不支持rem的浏览器，我们需要在rem前面写上对应的px值，让不支持浏览的服务器可以优雅降级。事实上，不用太担心默认的font-size:100%或font-size:62.5%。如果引入CSS预处理工具，可以使用默认值。如果你因为其他原因使用font-size:62.5%没有问题，你可以在body中重新设置回你需要的默认font-size。使用方案：html{font-size:6.25%;}@mediascreenand(max-width:768px){html{font-size:3.25%;}}@mediascreenand(min-width:768px){html{font-size:5.25%;}}@mediascreenand(min-width:992px){html{font-size:6.25%;}}@mediascreenand(min-width:1200px){html{font-size:7.0%;}}/*@mediascreenand(min-width:640px){html{font-size:6.25%;}}应用上面的公式：1rem=1*6.25%*16px其中：6.25%*16=0.0625*16=1所以：1rem=1px如果文档宽度小于300像素，修改背景色(background-color):@mediascreenand(max-width:300px){body{background-color:lightblue;}}min-width定义页面在输出设备中的最小可见区域宽度。>=300px:Effectivemax-width定义页面在输出设备中的最大可见区域宽度。<300px:Effective*/以上使用方案，问题是屏幕大小划分和字号比例可能不适合自己的项目。媒体查询的关键点：如何选择屏幕尺寸分割点？经典响应式布局框架，bootStrap划分如下：超小屏（手机）：<768px小屏（平板）：>=768px中屏（桌面显示）：>=992px超大屏（大桌面显示）：>=1200px在PC端缩放页面时，可以看到自适应布局。切换到移动端时，也会根据屏幕尺寸进行响应式布局。参考文章：https://juejin.im/post/684490...效果演示网页使用示例
