响应式网页

睡睡睡睡睡觉

已于 2023-07-30 00:48:02 修改

阅读量48

点赞数

文章标签：前端

于 2023-07-29 23:24:56 首次发布

本文链接：https://blog.csdn.net/weixin_75207853/article/details/132001439

版权

文章介绍了响应式网页设计的关键技术，包括媒体查询的使用，如`@media`规则，以及注意事项如书写顺序。同时，详细阐述了Bootstrap框架的应用，如容器、栅格系统和不同屏幕尺寸下的布局调整。还提到了Bootstrap中的按钮样式和表格样式，以及如何引入和使用字体图标。

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

响应式网页

一、媒体查询

@media(width:320px){
    html{
        background-color:green;
    }
}

在这里插入图片描述

媒体特性

max-width： 最大宽度
min-width： 最小宽度

书写顺序

max-width要从大到小
min-width要从小到大

若是没有按书写顺序进行书写，因为css的层叠性，后面写的样式一旦生效会覆盖前面写的样式。

案例：左侧隐藏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .box{
                display: flex;
                height: 500px;
            }
            .box .left{
                background-color: pink;
                flex: 1;
            }
            .box .right{
                background-color: skyblue;
                width: 1000px;
            }
            @media(max-width:1000px){
                .left{
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">被隐藏区域</div>
            <div class="right">响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页响应式网页        </div>
        </div>
    </body>
</html>

（了解）完整写法

在这里插入图片描述

逻辑操作符：and、only和not。

媒体类型：屏幕（screen）、打印预览（print）、阅读器（speech）、不区分类型（all）

媒体特性：宽高、最小（大）宽高、屏幕方向（orientation）——portrait竖屏、landscape横屏

外部CSS

当媒体查询里面需要写多的选择器的时候，可以令其单独分成一个css文件

在这里插入图片描述

<link rel="stylesheet" media="(max-width:900px)" href="./5.外部CSS.css">

body{
    background-color: skyblue;
}

二、Bootstrap

引入

在这里插入图片描述

使用

调用对应的类名

例子：调用响应式版心居中.container

在这里插入图片描述

栅格系统

栅格化是指将整个网页等分成12等份，每个盒子占用的对应的份数。

例如：一行四个盒子，每个盒子占3份

常用布局类：

col-sm-3
row

Bootstrap总共划分了6个响应区间：

	xs <= 576px	sm >=576px	md >=768px	lg >=992px	xl >=1200px	xxl >=1320px
Container max-width	None(auto)	540px	720px	960px	1130px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

Class prefix中 .col-sm-（）括号处加的是份数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
</head>
<body>
    <!-- 宽度大于1200px 一行排4个盒子=3份 -->
    <!-- 宽度大于768px 一行排2个盒子=6份 -->
    <!-- 宽度大于576px 一行排1个盒子=12份 -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
        </div>
    </div>
</body>
</html>