Web响应式布局—媒体查询—BootStrap框架及其使用

最新推荐文章于 2024-04-20 16:13:23 发布

小琳爱分享

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量463

点赞数

分类专栏：移动Web 文章标签：前端 bootstrap 媒体

本文链接：https://blog.csdn.net/qq_45708377/article/details/126051428

版权

随着页面的大小变化，网页内容不变化，网页布局发生变化。
同一行代码可以适配不同的屏幕宽度和不同设备。

在这里插入图片描述

一.媒体查询

根据条件的不同设置不同的CSS样式
目标：能够根据设备宽度的变化，设置差异化样式
注意：要注意大小顺序，不能写反了

1.常用写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            视口宽度 <= 768px，网页背景色是 粉色
            视口宽度 >= 992px，网页背景色是 绿色
            视口宽度 >= 1200px，网页背景色是 skyblue
         */

         /* css属性都有层叠性 */
        
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }
        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }

    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.完整写法

在这里插入图片描述

3.link外链式CSS引入

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
    <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body>
</body>
</html>