前端面试题对于媒体查询的理解

前端面试题对于媒体查询的理解响应式适配根据不同的屏幕尺寸,显示不同的效果(设置盒子的样式)媒体查询是自CSS3开始加入的一个功能。它可以进行响应式适配展示。媒体查询由两部分组成:个可选的媒体类型(如screen、print等)零个或多个媒体功能限定表达式(如max-width:500px、orientation:Iandscape等)这两部分最终都会被解析为true或false值,然后整个媒体查询值为true,则和该媒体查询关联的样式就生效,否则就不生效。代码部分/*在css样式表的定义中直接使用媒体查询*/.containerwidth:600px;height:200px;background-color:#6cf;margin:0auto;mediascreenand(max-width:767px).containerwidth:100%;mediascreenand(min-width:768px)and(max-width:991px).containerwidth:750px;mediascreenand(min-width:992px)and(max-width:1199px).containerwidth:980px;mediascreenand(min-width:1200px).containerwidth:1170px;mediascreenand(width:1200px).containerbackground-color:skyblue;

更多 “前端面试题对于媒体查询的理解” 相关考题