媒体查询应用

最新推荐文章于 2023-02-11 09:36:08 发布

杀破狼我也

最新推荐文章于 2023-02-11 09:36:08 发布

阅读量112

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/qq_48235154/article/details/122030223

版权

媒体查询

媒体查询会写如下代码即可：

 body {
     background-color: gray;
 }
 
 /* 大于等于768px 为粉色 */
 @media (min-width: 768px) {
     body {
         background-color: pink;
     }
 }
 
 /* 大于等于992px 为蓝色 */
 @media (min-width: 992px) {
     body {
         background-color: skyblue;
     }
 }
 
 /* 大于等于992px 为绿色 */
 @media (min-width: 1200px) {
     body {
         background-color: green;
     }
 }

媒体查询使用场景

约束移动端不要超过规定大小

 body {
     max-width: 540px;
     margin: 0 auto;
 }
 
 /* 大于等于540px 则不允许  html文字大小再改动，强制定为 54px*/
 @media (min-width: 540px) {
     html {
         font-size: 54px !important;
     }
 }

元素的显示和隐藏

 @media (max-width: 800px) {
     .box div:nth-child(2) {
         display: none;
     }
 
     .box div:last-child {
         width: 350px;
     }
 }