05-响应式布局

已于 2022-04-05 15:04:02 修改
阅读量589 收藏 3
点赞数 1
分类专栏： 移动web 文章标签： 前端 html5 css
于 2022-03-31 15:05:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44941576/article/details/123872680
版权

响应式布局

作用：只写一套代码，可以在PC端跟移动端运行

原理：根据屏幕的宽度不同，去使用不同的CSS（媒体查询）

那响应式布局是如何实现的呢？又能在开发中给我们带来什么便利呢？讲到响应式布局，需要先了解一下媒体查询。因为响应式布局的本质就是媒体查询。

媒体查询

1.1什么是媒体查询
  • 媒体查询( Media Query )是CSS3新语法。
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重 置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机 ,平板等设备都用得到多媒体查询
1.2为什么要使用媒体查询

当我们使用rem的时候，是通过设置html根标签的字体fontsize来换算单位的。但是当屏幕尺寸发生变化时，html的根标签字体大小不会主动跟着改变，需要我们使用其他的工具，实现html根标签字体大小随着屏幕尺寸的变化而变化。这个工具就是媒体查询

1.3作用以及用法

  1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？

    答：媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式；当某个条件成立, 执行对应的CSS样式

  2. 目标：：能够使用媒体查询设置差异化CSS样式

  3. 设置媒体查询CSS的语法：

    练习一：

    设置在375px宽的屏幕上，字体大小为40px

        <style>
        /* 设置媒体查询CSS的语法 */
        /* @media (媒体特性) {
            选择器 {
                CSS属性
            }
        } */
        @media (width:375px) {
            html {
                font-size: 40px;
            }
        }
    </style>

    练习二：在屏幕宽度为375px的屏幕中显示背景颜色为yellow；在宽度为360的屏幕中显示背景颜色为red

    <!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>媒体查询</title>
</head>
<style>
    /* 定义媒体查询 */
    @media (width:375px) {
        html {
            background-color: yellow;
        }
    }

    @media (width:360px) {
        html {
            background-color: red;
        }
    }
</style>

<body>

</body>

</html>
    • 媒体特性是指设置设备的屏幕宽度，如上例中的 “@media (width:375px)”，是指在宽度为375px的设备中，html的字号设置为40px，相当于1rem=40px
1.4常用推荐写法

上方展示的时媒体查询最简洁的写法，现在推荐的时常用以及较为推荐的写法：

语法：

<!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>推荐写法</title>
    <style>
        /* 最简洁的写法 */
        @media (width:375px) {
            html {
                background-color: yellow;
            }
        }

        /* 常见和推荐的写法 */
        @media screen and (width:360px) {
            html {
                background-color: red;
            }

        }
    </style>
</head>

<body>

</body>

</html>

媒体查询不仅可根据屏幕的宽度来调用不同的CSS，也可以设置高度来调用，只需要将宽度改成高度即可。

语法：

<!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>推荐写法</title>
    <style>
        /* 最简洁的写法 */
        @media (width:375px) {
            html {
                background-color: yellow;
            }
        }

        /* 常见和推荐的写法 */
        @media screen and (width:360px) {
            html {
                background-color: red;
            }

        }

        /* 不仅可以针对宽度，还可以针对高度 */
        @media screen and (height:844px) {
            html {
                background-color: greenyellow;
            }

        }
    </style>
</head>

<body>

</body>

</html>
1.5媒体查询指定区间写法

刚才介绍的只是当屏幕宽度处于一个特定的值时，出现相应的CSS样式，那是否可以指定一个区间，让屏幕宽度位于这个区间时，显示出相应的样式呢？让我们来感受一些媒体查询的指定区间写法。

1.5.1 当屏幕宽度小于100px

屏幕小于100px，也就是截至数值最大为100px时

    <style>
        /* 1.当屏幕宽度小于100px时变成yellow */
        @media screen and (max-width:100px) {
            html {
                background-color: yellow;
            }
        }
	</style>

1.5.2 当屏幕宽度大于800px

	<style>
        /* 当屏幕宽度大于800px时显示red */
        @media screen and (min-width:800px) {
            html {
                background-color: red;
            }
        }
	 </style>

1.5.3 当屏幕宽度大于400px且小于800px

填写多个属性时，中间使用“and”连接即可

<style>       
/* 当屏幕宽度大于400px，小于800px时，显示pink */
        @media screen and (min-width:400px) and (max-width: 800px) {

            html {
                background-color: pink;
            }
        }
  </style>

综合代码：

<!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>媒体查询指定区间写法</title>
    <style>
        /* 1.当屏幕宽度小于100px时变成yellow */
        @media screen and (max-width:100px) {
            html {
                background-color: yellow;
            }
        }

        /* 2.当屏幕宽度大于800px时显示red */
        @media screen and (min-width:800px) {
            html {
                background-color: red;
            }
        }

        /* 3.当屏幕宽度大于400px，小于800px时，显示pink */
        @media screen and (min-width:400px) and (max-width: 800px) {

            html {
                background-color: pink;
            }
        }
    </style>
</head>

<body>

</body>

</html>
1.6媒体查询练习

简单的了解过媒体查询之后。做些简单的练习尝试下自己是否可以完成相应的训练。

题目：如何做到在不同尺寸的屏幕中，div盒子显示出如下方图片中的效果呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5yjiGWl5-1648710250300)(05-响应式布局.assets/1647942060915.png)]

完成代码：

<!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>练习</title>
    <style>
        div {
            height: 100px;
            background-color: aqua;
            margin-bottom: 10px;
        }

        /* 屏幕小于400ox的时候 */
        @media screen and (max-width:400px) {}

        /* 屏幕在400-800之间 */
        @media screen and (min-width:400px) and (max-width:800px) {
            div {
                width: 50%;
                float: left;
            }
        }

        /* 当屏幕大于800px时 */
        @media screen and (min-width:800px) {

            div {
                width: 25%;
                float: left;
            }
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>

</html>

Bootstrap

Bootstrap包含了一个响应式的、移动设备优先的、不固定网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类

Bootstrap那么强大，那如何进行使用呢？

Bootstrap的使用

网站链接https://v3.bootcss.com/

  1. 打开网站链接，进入到Bootstrap网站→点击入门，开始下载bootstrap(下载第一个：用于生产环境的bootstrap)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1tZEOGp-1648710250300)(05-响应式布局.assets/1648104881966.png)]

  2. 下载解压之后，将其中的三个文件引入到html文件中

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vYpqWKHK-1648710250301)(05-响应式布局.assets/1648105524326.png)]

    <!--CSS文件需要用link引入到文件中 -->
<link rel="stylesheet" href="./css/bootstrap.css">
<body>    
<!--js文件是需要引入到script中-->
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"> </script>
    <!-- 这两个文件的引入顺序不能乱，不然会导致出错 
    jquery.js在上面-->
</body>

  3. 验证是否引入成功

    要验证是否成功引入bootstrap，直接在bootstrap的“组件”中复制代码测试一下

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6QsFm1b-1648710250301)(05-响应式布局.assets/1648105877892.png)]

    在组件→导航条中直接复制该代码进行测试，中间的红色方是代码的效果图

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AqI1P2uq-1648710250301)(05-响应式布局.assets/1648105972672.png)]

  4. 直接复制该代码放在body中进行测试，可以得出以下结果，可以看出已经是跟bootstra网站中的效果是一致的，表明我们已经成功引入。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1QWBqyUD-1648710250301)(05-响应式布局.assets/1648106140561.png)]

    代码：（因css文件跟js文件放置位置不同，可能需要重新调整一下路径进行使用）

    <!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>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>

<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"> </script>
    <!-- 这两个文件的引入顺序不能乱，不然会导致出错 
    jquery.js在上面-->
</body>

</html>

我们先重点了解一下栅格系统，这个是实现响应式布局的核心，本质还是借用媒体查询使用。

Bootstrap栅格系统（Grid System）相关类

  1. container类表示栅格。使用container类能够获得Bootstrap默认设置的对齐（alignment）和内边距（padding）样式。
  2. 使用.row来创建一行，每行又分为多个列(12)。
  3. 内容应该放置在列内，且只有列可以是行的直接子元素 。
  4. 网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-md-4。
  5. 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负值得到。就是说：你想减少列间距，用负的margin来写。

Bootstrap栅格系统划分的依据

栅格系统是通过媒体查询对用户使用的屏幕大小进行检测之后，按照屏幕尺寸的不同进行自适应，划分为分为四种屏幕：

  1. 四种屏幕：

  • 超小屏幕 xs 手机 (<768px)

  • 小屏幕 sm 平板 (≥768px)

  • 中等屏幕 md 桌面显示器 (≥992px)

  • 大屏幕 lg 大桌面显示器 (≥1200px)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-631nwlwO-1648710250302)(05-响应式布局.assets/1647942807670.png)]

  1. 类前缀：表示在这四种屏幕中，列占据多少份(总份数为12)
  • .col-xs -列数
  • .col-sm -列数
  • .col-md -列数
  • .col-lg -列数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16Zw1IkR-1648710250302)(05-响应式布局.assets/1648087567219.png)]

​

栅格化引入的代码以及分析

1.栅格化的完整使用代码：

  • 栅格化需要使用固定类名“container”包起来，接下来是类名“row”是行的意思。在栅格化中，一行默认为12列

  • 接下来的“col-lg-3”中，col是列“ columns”的缩写，“lg”是大屏幕的缩写，“3”的意思是一行默认的12列除以3，等于一行存在四个子元素。

    完整的解读：在大屏幕(lg)中,一行显示4(12/3)个元素

  • 在下方的代码中，只设置了在大屏幕、中等屏幕跟极小屏幕中元素的栅格化设置，没有设置小屏幕的显示方式。如果没有设置元素某种尺寸中的显示方式，系统会默认跟随更小的屏幕。也就是小屏幕的显示方式会跟随极小屏幕的设置。

  • 同时设置元素在多种屏幕中的显示方式，中间添加空格即可。

    <div class="container">
            <div class="row ">
                <div class="col-lg-3 col-md-6 col-xs-12 bottom"><img src="./images/pro1.jpg" alt="" class="img-rounded">
                </div>
                <div class="col-lg-3 col-md-6 col-xs-12 bottom"><img src="./images/pro2.jpg" alt="" class="img-rounded">
                </div>
                <div class="col-lg-3 col-md-6 col-xs-12 bottom"><img src="./images/pro3.jpg" alt="" class="img-rounded">
                </div>
                <div class="col-lg-3 col-md-6 col-xs-12 bottom"><img src="./images/pro4.jpg" alt="" class="img-rounded">
                </div>
            </div>
        </div>

pg" alt=“” class=“img-rounded”>
阿良_C
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
05-响应式布局.md
09-01
05-响应式布局
前端validate校验和响应式布局
11-27
综上所述，"day05_validate"压缩包文件可能包含使用Bootstrap和JavaScript进行前端验证的实例，以及如何实现响应式布局的代码示例。学习这个资源，开发者可以掌握创建更健壮、用户体验更好的前端表单验证，并了解...
使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)
昊虹AI笔记
08-26 3467
使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)
媒体查询响应式布局
nknnl7的博客
12-15 1383
响应式布局：指在同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，移动端再开发一套，pad端再开发一套，而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是移动端、PC端、pad端，从而请求服务层，返回不同的页面。
字体的响应式处理
最新发布
qq505751223的博客
06-01 330
总结：字体的响应式处理涉及到相对单位的使用、媒体查询、断点调整、自适应布局以及优化字体可读性和视觉效果等多个方面。通过综合运用这些技术，可以确保文本在不同设备和屏幕尺寸上都能得到良好的展示效果。字体的响应式处理在前端开发中扮演着重要角色，以确保文本在不同设备和屏幕尺寸上都能保持良好的可读性和呈现效果。六、优化字体可读性和视觉效果。五、安全字体和自定义字体。
@media响应式布局
beekim的博客
09-08 1632
1.基础语法 media语法： 文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background-color:lightblue; } } 2.案例一 实例： *{padding: 0;margin: 0;} ul{list-style: none;} ul{ display: flex; flex-wrap: wrap;
HTML响应式布局
hexianfan的博客
03-15 806
media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media。rem 是 css3 中新增加的一个单位属性，是相对长度单位。相对于根元素（即html元素） font-size计算值的倍数。（1:10的比例更便于换算）把 html 设置成。
html中怎么设置字体的大小为响应式
m0_68094390的博客
05-22 649
在HTML中设置字体大小为响应式，可以使用CSS3中的@media查询和vw/vh单位来实现。
Web-前端教程05 Flex 布局大法.zip
05-24
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是现代Web开发中的一个核心...在Web-前端教程05 Flex 布局大法.mp4中，你将深入学习到Flex布局的原理、使用方法及实践技巧，为构建现代响应式网站打下坚实基础。
Projeto_05-Page-Loja-de-Carros:响应页面
04-29
响应式设计的关键在于利用CSS媒体查询和灵活的布局技术，确保页面在任何分辨率下都能保持清晰、易读且功能完整。 【标签】"HTML"表明此项目主要使用超文本标记语言（HTML）来构建页面结构。HTML是网页的基础，用于...
JsPuro-05-电子商务
02-10
10. **响应式设计**：JavaScript配合CSS3可以实现响应式布局，使网站在不同设备上都有良好的显示效果。 在"JsPuro-05-ECommerce-master"这个项目中，可能包含了实现以上功能的代码示例和教程，帮助开发者理解并掌握...
css案例5——字体自适应、文字随页面变化而变化、rem单位
努力、拼搏、奋进
05-24 8810
字体自适应
响应式文字大小：CSS 根据容器的大小自动调整字体大小
hongying_18的博客
12-01 4174
通过CSS属性 container-type 和 cqw cqh单位 实现响应式的调整字体的大小
响应式字体大小
weixin_45517927的博客
05-11 3184
在做响应式布局的时候，我们可以使用media媒体查询)来设置元素大小和元素的排版，也可以利用bootstrap这一个就我目前使用过开发项目的框架来说。可以用它定义好的类实现响应式，但是页面中有时候字体也是需要在不同屏幕下显示不同大小比例使网页结构更加美观简洁。 第一种方式 bootstrap中也提供了启用响应字体大小的选项，官网，默认情况下是没有响应式的。这个时候需要去按照官网说的将 $enable-responsive-font-sizes Sass 变量更改为true并重新编译Bootstrap来启用r
CSS中的响应式布局
qq_37493515的博客
03-01 387
一、响应式布局 在小型网站建设中，有运用一套代码代码来适应不同终端分辨率的需求，优点：节约制作时间、节约制作成本、便于维护等优点。 CSS3利用媒体查询（media queries）即可针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。 1024分辨率以上：PC端 1024 ~ 768 : pad pro 768 ~ 450 : pad mini , m...
春江花月夜
weixin_30677073的博客
09-05 226
作者：张若虚 春江潮水连海平，海上明月共潮生。 滟滟随波千万里，何处春江无月明！ 江流宛转绕芳甸，月照花林皆似霰; 空里流霜不觉飞，汀上白沙看不见。 江天一色无纤尘，皎皎空中孤月轮。 江畔何人初见月？江月何年初照人？ 人生代代无穷已，江月年年只相似。 不知江月待何人，但见长江送流水。 白云一片去悠悠，青枫浦上不胜愁。 谁家今夜扁舟子？何处相思明月楼？ 可怜楼上月徘...
html5+css3响应式布局应该考虑到的屏幕的尺寸
qq_38922435的博客
05-28 7754
超小屏幕：（手机，小于768px）。小屏幕：（平板，大于等于768px）。中等屏幕：（桌面显示器，大于等于992px）。大屏幕：（大桌面显示器，大于等于1200px）。...
响应式网页：使用 rem 设置文字大小
axl---专心专注于web前端开发
08-07 518
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。 当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。 网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。 一、那...
1-企业网络架构基础 03-网络模型 04-抓包软件的使用 05-dns 06-http 07-邮件服务
07-17
1-企业网络架构基础：企业网络架构是指企业在网络方面的组织结构和布局。它包括网络设备的部署、网络拓扑结构的设计、网络安全策略等。一个好的企业网络架构可以提高企业的网络通信效率和安全性。 03-网络模型：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值