day07 响应式网页：媒体查询、BootStrap

满分的宅男

已于 2023-08-24 17:25:31 修改

阅读量495

点赞数

分类专栏：移动web 文章标签： bootstrap html css less

于 2022-02-10 16:38:36 首次发布

本文链接：https://blog.csdn.net/weixin_43730921/article/details/122850356

版权

本文介绍了响应式网页设计中的关键概念——媒体查询，详细解析了其语法和在HTML中应用的方式。同时，深入探讨了流行的前端框架BootStrap，通过展示多个效果来体现其响应式布局的优势。最后，通过一个实际案例，展示了如何结合媒体查询和BootStrap创建响应式页面。

摘要由CSDN通过智能技术生成

一、媒体查询

根据设备宽度的变化，设置差异化样式

语法：

@media (媒体特性) {

选择器{

样式

}

媒体特性写法：

max-width （从大到小）

min-width （从小到大）

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

完整写法：

@media 关键词媒体类型 and (媒体特性) { css代码 }

关键词：and、only、not

媒体类型：媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

媒体特征：用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

外链式CSS引入：

    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width:992px)">
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./two.css" media="(min-width:1200px)">

隐藏

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            display: flex;
        }

        .left {
           
            width: 300px;
            min-height: 500px;
            background-color: pink;
        }

        .main { 
            flex: 1;
            min-height: 500px;
            background-color: skyblue;
        }

        /* 如果检查视口宽度小于768px left隐藏 */
        @media (max-width:768px) {
            .left{
                display: none;
            }
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div>
    </div>
</body>
</html>