响应式布局

响应式布局

一、媒体查询

1.媒体查询-max-min-width

2.媒体特性常用写法

max-width（从大到小）

min-width （从小到大）

/*视口宽度小于等于768px，网页背景色是粉色*/
@media(max-width:768px) {
    body {
        background-color:pink;
    }
}
/*视口宽度大于等于1200px,网页背景颜色是skyblue*/
@media(min-width:1200px){
    body {
        background-color:skyblue;
    }
}

3.书写顺序

/*视口宽度 >= 768px，网页背景颜色是粉色   视口宽度 >= 992px, 网页背景色是绿色
  视口宽度 >= 1200px，网页背景色是skybule*/
@media(min-width:768px) {
    body {
         background-color:pink;
    }
}
@media(min-width:992px) {
    body {
        background-color:green;
    }
}
@media(min-width:1200px) {
    body {
        background-color:skyblue;
    }
}

4.媒体查询完整写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MEb5ZChP-1659431232994)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20220610214219742.png)]

5.媒体查询link写法

<link rel= "stylesheet" href="./one.css" media="(min-width:992px)">
<link rel="stylesheet" herf="./two.css" media="(min-width:1200px)">

6.媒体查询隐藏

/*如果检测到视口宽度小于768px，认为是手机端，left隐藏*/
@media (max-width:768px) {
    .left{
        dispaly:none;
    }
}

(max-width:768px) {
.left{
dispaly:none;
}
}