曾几何时，我认为使用媒体查询是一种响应式布局。这种认识太肤浅了。今天，让我们重新认识一下什么是响应式布局。检查演示并查看源代码。欢迎给什么是响应式布局加注星标。风靡数年的Bootstrap是典型的响应式布局框架。虽然现在已经被淘汰了，但是一些流行的UI框架都是基于Bootstrap的思想来实现响应式布局的，比如AntDesign、MaterialDesign等，可以说Bootstrap开启了响应式时代布局。用过几个响应式布局框架，也研究过响应式布局的原理。我觉得真正的响应式布局应该是：我们的网站使用一套代码，兼容多种Terminal设备，在不同的设备上会做不同的调整，比如显示或者隐藏等等。我体会响应式布局的要点当你想要实现响应式布局，需要注意以下几点device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>上面代码的作用是将我们网页的宽度设置为设备的宽度，初始化缩放为1，并禁止用户缩放mediaquerymediaquery是响应式布局的核心，为什么我们的网页可以根据窗口大小自动调整样式取决于mediaquerymediatype@mediaall{}//foralldevices@mediaprint{}//forprinters@mediascreen{}//forPC,Pad,Phonemediapropertiesmediaproperties有以下选项mediapropertiesvaluesacceptmaxormindescriptionwidthyesdefines页面可见区域在输出设备中的宽度heightyes定义了页面在输出设备中可见区域的高度device-widthyes定义了页面的屏幕可见宽度outputdevicedevice-heightyes定义输出设备的屏幕可见高度orientationportrait,landscapenoheight是否大于widthaspect-ratioyes宽高比device-aspect-ratioyesdevice-widthtodevice-heightresolutionyes定义设备的分辨率-webkit-device-pixel-ratio是devicepixelratiomobileprioritymobilepriority是指我们写的样式都是基于移动端的。当屏幕宽度增加时，后面的样式会覆盖前面的样式。请看下面：/*iphone678*/body{background-color:yellow;}/*iphone5*/@mediascreenand(max-width:320px){body{background-color:red;}}/*iphoneX*/@mediascreenand(min-width:375px)and(-webkit-device-pixel-ratio:3){body{background-color:#0FF000;}}/*iphone678plus*/@mediascreenand(min-width:414px){body{background-color:blue;}}/*ipad*/@mediascreenand(min-width:768px){body{background-color:green;}}/*ipadpro*/@mediascreenand(min-width:1024px){body{background-color:#FF00FF;}}/*pc*/@mediascreenand(min-width:1100px){body{background-color:black;}}PC优先PC优先和移动端优先相反，我们写样式主要在PC端，随着屏幕宽度的减小，后面的样式会覆盖前面的样式，请看下面：/*pcwidth>1024px*/body{background-color:yellow;}/*ipadpro*/@mediascreenand(max-width:1024px){body{background-color:#FF00FF;}}/*ipad*/@mediascreenand(max-width:768px){body{background-color:green;}}/*iphone678plus*/@mediascreenand(max-width:414px){body{background-color:blue;}}/*iphoneX*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:3){body{background-color:#0FF000;}}/*iphone678*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:2){body{background-color:#0FF000;}}/*iphone5*/@mediascreenand(max-width:320px){body{background-color:#0FF000;}}你有没有注意到PC端更喜欢使用max-width，而移动端更喜欢使用min-width。你有这个技术的字体单元吗？既然要做响应式布局，那么我们的字体大小也要根据屏幕的大小进行调整。改一下，这时候我们不能使用px作为字体单位，可以使用em或者rem，两者的区别在于一个是相对于父元素，一个是相对于html标签我们建议使用rem作为字体单位。默认情况下，我们的html标签的字体大小是16px。我们可以使用媒体查询来设置不同设备下的字体大小/*pcwidth>1100px*/html{font-size:100%;}body{background-color:yellow;font-size:1.5rem;}/*ipadpro*/@mediascreenand(max-width:1024px){body{background-color:#FF00FF;字体大小：1.4rem；}}/*ipad*/@mediascreenand(max-width:768px){body{background-color:green;字体大小：1.3rem；}}/*iphone678plus*/@mediascreenand(max-width:414px){body{background-color:blue;字体大小：1.25rem；}}/*iphoneX*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:3){body{background-color:#0FF000;字体大小：1.125rem；}}/*iphone678*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:2){body{background-color:#0FF000;字体大小：1rem；}}/*iphone5*/@mediascreenand(max-width:320px){body{background-color:#0FF000;字体大小：0.75rem；}}百分比布局用过Bootstrap的同学都知道，里面有个网格系统。说白了就是用百分比来定义我们元素的宽高，而不是直接用width。CSS3支持最大和最小宽高，可以用percentage和max(min)一起定义元素在不同设备下的宽高/*pcwidth>1100px*/html,body{margin:0;padding:0;宽度：100%；高度：100%；}一边{宽度：10%;高度：100%；背景色：红色；浮动：左；}主要{高度：100%；背景色：蓝色；溢出：隐藏；}/*ipadpro*/@mediascreenand(max-width:1024px){aside{width:8%;背景色：黄色；}}/*ipad*/@mediascreenand(max-width:768px){aside{float:none;宽度：100%；高度：10%；背景色：绿色；}main{height:calc(100vh-10%);背景色：红色；}}/*iphone678plus*/@mediascreenand(max-width:414px){aside{float:none;宽度：100%；高度：5%；背景色：黄色；}main{height:calc(100vh-5%);-红色;}}/*iphoneX*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:3){aside{浮动：无；宽度：100%；高度：10%；背景颜色：蓝色；}main{height:calc(100vh-10%);背景色：红色；}}/*iphone678*/@mediascreenand(max-width:375px)and(-webkit-device-pixel-ratio:2){aside{float:none;宽度：100%；高度：3%；背景色：黑色；}main{height:calc(100vh-3%);背景色：红色；}}/*iphone5*/@mediascreenand(max-width:320px){aside{float:none;宽度：100%；高度：7%；背景色：绿色；}main{height:calc(100vh-7%);背景色：红色；}}图片自适应图片自适应是指图片可以根据容器的大小进行缩放，可以使用如下代码：img{max-width:100%;height:auto;}max-width保证图片展开后与容器等宽，height为auto保证图片按比例缩放不失真。如果是背景图如果想灵活使用background-size属性flex,grid,absolutelayout,BFC，另外还可以灵活使用flexlayout,gridlayout,absolutelayout,BFC等最后实现一个响应式布局，要注意以下几点Point:viewportmediaqueryfontunitpercentagelayoutimageadaptiveflex,grid,BFC,absolutelayout等常用技巧viewdemo查看源码，欢迎star你的打赏是我写作的动力
