响应式布局

已于 2023-02-20 13:21:35 修改
阅读量287 收藏
点赞数
文章标签： 前端 javascript html
于 2022-06-27 13:40:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40832034/article/details/125463983
版权

在这里插入图片描述
一套代码可以适配不同大小的屏幕和设备

一、媒体查询

1、媒体查询

目标：能够根据设备宽度的变化，设置差异化样式
之前的媒体查询，通过检测视口宽度设置根字号
在这里插入图片描述
在响应式布局中，媒体查询是一个范围。

  • 媒体特性常用写法
    max-width
    min-width

它能实现比如说宽度小于670px时，网页背景色为蓝色

<style>
    @media(max-width:670px){
      body{
        background-color: aqua;
      }
    }
  </style>

2、书写顺序

需求
默认网页背景色是灰色
屏幕宽度在768-992之间, 网页背景色是粉色
屏幕宽度在992-1200之间, 网页背景色是skyblue
屏幕宽度大于1200, 网页背景色是绿色

<style>
    @media(min-width:768px){          ①
      body{
        background-color: pink;
      }
    }
    @media (min-width:992px) {              ②
      body{
        background-color: skyblue;
      }
    }
    @media (min-width:1200px) {           ③
      body{
        background-color: green;
      }
    }
  </style>

如果这三个媒体查询书写顺序变了，就不会有这样的效果，因为css有层叠性，如果先写③，再写①②，③会被②覆盖，导致大于992px都是蓝色。
在这里插入图片描述

所以
min-width（从小到大）
max-width（从大到小）

3、（了解）完整写法

在这里插入图片描述

  • 关键字：and、only、not

  • 媒体类型：媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
    在这里插入图片描述

  • 媒体特性：主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等
    在这里插入图片描述

4、外链式CSS引入

上面的媒体查询写法都是在style中直接写的，可以使用外链式引入
在这里插入图片描述
如大于等于992粉色，大于等于1200绿色

<!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="./a.css" media="(min-width:992px)">
  <link rel="stylesheet" href="./b.css" media="(min-width:1200px)">
  
  <style>
  </style>
</head>
<body>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

5、隐藏

一般电商网站，如果宽度变小，有的小banner图就会隐藏

如下图，想要实现随着窗口变小，左边蓝色的框框隐藏的效果

在这里插入图片描述

<style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      display: flex;
      width: 100%;
    }
    .left{
      width: 300px;
      min-height: 500px;
      background-color: aqua;
    }
    .right{
      flex: 1;
      min-height: 500px;
      background-color: blueviolet;
    }
    @media(max-width:500px){     //小于一定宽度，隐藏
      .left{
        display: none;
      }
    }
  </style>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right">dknsnfknfcjdfkvnjfvbfjvbofjropir3pf43pojf3ofjiogjtrkghtrjghiughtuihgtuigtruihreiofroir4-frjirogvjiojvbgibhfgioeir0i03</div>
  </div>
</body>

二、BootStrap

1、UI框架概念

将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
作用：基于框架开发，效率高，稳定性高。

2、BootStrap简介

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/

  • 下载
    在这里插入图片描述
  • 使用步骤
  1. 引入： BootStrap提供的CSS代码
 <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

调用只能bootstrap.css或者bootstrap.min.css，bootstrap.min.css是压缩过的bootstrap.css，体积小，方便用户下载

  1. 调用类：使用BootStrap提供的样式
    container：响应式布局版心类
<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div{
            background-color: pink;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">1</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

3、BootStrap栅格系统

目标：使用BootStrap栅格系统布局响应式网页

栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

在这里插入图片描述

<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container div{   
            background-color: pink;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">2</div>
        <div class="col-lg-3 col-md-6 col-sm-12">3</div>
        <div class="col-lg-3 col-md-6 col-sm-12">4</div>
    </div>
</body>
</html>

当视口宽度大于1200时：
在这里插入图片描述
当视口宽度位于992-1200px时：
在这里插入图片描述
当视口宽度小于992时：
在这里插入图片描述

3、其他类名

  • .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
  • .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
  • 分别使用.row类名和 .col类名定义栅格布局的行和列。
    在这里插入图片描述
<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div{
            background-color: pink;
            height: 50px;
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
     <!-- container有内边距15px -->
    <div class="container">1</div>

    <!-- 使用.row将有-15的外边距，可以抵消container的内边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>
    
    <!-- container-fluid宽度100%,左右各15px内边距 -->
    <div class="container-fluid">3</div>
</body>
</html>

在这里插入图片描述

4、全局样式

目标：掌握BootStrap手册用法，使用全局CSS样式美化标签

手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

使用方法
引入BootStrap样式
引入对应的效果名称作为类名

  • 表格
    table : 基本类名, 初始化表格默认样式
    table-bordered : 边框线
    table-striped : 隔行变色
    table-hover : 鼠标悬停效果
    table-responsive : 表格宽溢出滚动

如新建一个表格，隔行变色

<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">  ①
    <style> 
    </style>
</head>

<body>
    <table class="table table-striped">    //here  ②
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>   
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

  • 按钮
    btn : 基准样式
    btn-info; btn-success : 设置按钮背景色
    btn-block : 设置按钮为块元素
    btn-lg; btn-sm; btn-xs : 设置按钮大小
    在这里插入图片描述
    还有很多全局CSS样式，都可以通过手册查看并引用
    在这里插入图片描述

5、组件

目标：使用BootStrap组件快速布局网页，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能

  • 组件
    BootStrap提供的常见功能，包含了HTML结构和CSS样式。
  • 使用方法
    引入BootStrap样式
    复制结构，修改内容

（1）字体图标使用

  • Glyphicons字体图标的使用步骤
    • HTML页面引入BootStrap样式文件（注意路径css/bootstrap.min.css）
    • 空标签调用对应类名
      glyphicon
      图标类
<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">  ①
</head>
<body>
  <i class="glyphicon glyphicon-plus"></i>                                     ②
</body>
</html>

在这里插入图片描述

（2）下拉菜单

  • 使用方法
    引入BootStrap样式
    复制结构，修改内容

6、插件

实现常见的交互效果，如下拉菜单下拉后弹出子菜单
BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

  • 插件的使用步骤
    ①引入BootStrap样式
    ②引入js文件：jQuery.js + BootStrap.min.js（顺序不能颠倒）
    在这里插入图片描述
    ③复制HTML结构, 并适当调整结构或内容

（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>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">  ①
</head>
<body>
  <div class="dropdown">
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown trigger
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">       ③
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>

  <script src="./移动端/js/jquery.js"></script>                            ②
  <script src="./移动端/04-框架素材/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</body>
</html>

在这里插入图片描述

（2）利用插件实现轮播图

<!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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">   ①
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
  
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">    
      <div class="item active">
        <img src="./product.jpeg" alt="...">                             ③
        <div class="carousel-caption">
          ...
        </div>
        
      </div>
      <div class="item">
        <img src="./bg.png" alt="...">
        <div class="carousel-caption">
          ...
        </div>
        
      </div>
      <div class="item">
        <img src="./taobao.png" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
    </div>
  
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="./移动端/js/jquery.js"></script>                  ②
  <script src="./移动端/04-框架素材/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</body>
</html>

7、实战演练 AlloyTeam

（1）轮播图（JS插件）

  • ①去bootcss拷贝轮播图的代码
  • ②发现需求和已有模板不同，需求：

// 视口<768 高250
// 视口<992 高400
// 视口>992 高500

所以在css中写媒体查询
一般改变高度都是改面的大盒子，然后让里面的内容，如图片100%充满

@media(max-width:992px){
        .item{
            height:400px;
        }  
    }
    @media(max-width:768px){
        .item{
            height: 250px;
        }  
    }
    @media(min-width:992px){
        .item{
            height: 500px;
        }  
    }
  • ③发现图没有撑满，找到其标签让它100%
img{
        height: 100%!important;  //!important可以提高等级，防止等级不够
    }
  • ④还有其他一些小的格式的不同，如框架代码下面是圆点滑动，这里只需根据检查需求样式，找到选择器再添加宽高。
    在这里插入图片描述

（2）导航（组件）

  • ① 在组件里面找到导航，修修改改，找到多余的类名删掉，少的找类似的复制添加
  • ②导航条固定在顶端，找框架复制黏贴改格式，修改颜色从最大的盒子往里面找
  • ③此项目在视口小于992px时，导航条会折叠，boot框架默认在768折叠，定制解决，修改这个值。

在这里插入图片描述 在这里插入图片描述
然后重新下载，解压，重新引入（link）

（3）栅栏式，使用BootStrap快速布局网页

在这里插入图片描述

视口宽度>992时，一行排四个
视口宽度>768时，一行排两个
视口宽度<768时，一行排一个

<div class="container">
        <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
        <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">2</a></div>
        <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">3</a></div>
        <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">4</a></div>
      </div>

加个背景，效果如下图
在这里插入图片描述
发现自带间隙，是因为col类有自带空白，并且这个空白不能通过给div加margin实现，因为col实现一行四个是通过width:25%，没有地方加margin，是里面的内容的padding形成有空白的视觉效果。
不过这个col类自带padding：-15，不用另外加了。

（4）适合做成响应式的网站：

①企业站
②内容少
电商站内容太多，不合适，一般是PC端一个网站，移动端一个网站。

qq_40832034
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
媒体查询在html中怎么写,CSS3 - 使用媒体查询（media query）适配布局
weixin_39757265的博客
05-31 1709
1，媒体查询的作用@media (media-feature-name: value) {/* 符合条件时应用的样式 */}上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息(比如屏幕大小、分辨率、颜色位深等)，页面可以分别应用不同的样式甚至替换整个样式表。如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。注意：浏览器始终会采用位于@...
媒体查询的使用
li_chun_can的博客
08-19 3223
定义 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询与弹性盒布局的适用情况 媒体查询：当页面的结构发生变化的话最好使用媒体查询。 弹性盒：如果只是宽高的变化，尽量使用弹性盒。 使用方法 <!-- link元
HTML与CSS-CSS篇九 媒体查询
Yi_Lesama的博客
06-13 627
​ 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
选择正确的单位：百分比、视窗单位和像素单位在网页设计中的应用
最新发布
一个普通人
06-04 451
在网页设计中，选择合适的单位对于创建响应式、灵活和吸引人的布局至关重要。在本文中，我们将探讨三种常用的单位：百分比单位（%）、视窗单位（vw、vh）和像素单位（px），以及它们在网页设计中的应用和区别。
HTML媒体查询
weixin_70815247的博客
07-15 2007
使用html，css实现简单的媒体查询
【网页设计】35：媒体查询
https://blog.csdn.net/m0_74834215
03-18 1063
可以看到div标签的样式在随浏览器窗口宽度变化而变化，从style1变化到style3，这就是响应式的原理。响应式开发原理：使用媒体查询media针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。响应式概念：一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。自适应概念：多套页面适配不同终端，网页自适应显示在不同大小的终端设备上。
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
基于layui框架响应式布局的一些使用详解
10-16
**基于layui框架响应式布局详解** layui是一款轻量级的前端UI框架，它提供了丰富的组件和优雅的样式，尤其在响应式布局方面表现突出。本文将深入探讨如何使用layui实现响应式布局，帮助开发者快速构建适应不同设备...
HTML番外篇(五)-移动端适配
Welisit的博客
08-24 5940
移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。前端我们已经学习了大量HTML、CSS的前端开发知识，并且也进行了项目实战；这些知识也同样适用于移动端开发，但是如果想让一个页面真正适配于移动端，我们最好多了解一些移动端的知识；原生App开发（iOS、Android、RN、uniapp、Flutter等）小程序开发（原生小程序、uniapp、Taro等）Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）
响应式开发（HTML5CSS3）实现媒体查询的功能案例
weixin_59042297的博客
04-23 1177
1.本文讲解的响应式开发技术（HTML5+CSS3+Bootstrap）的HTML5媒体查询等功能方法的代码，这也是很多教材的一个典型案例；2.本文将讲解涉及到HTML5表单等功能方法的知识点，其它方面会大致讲一下；3.本代码是使用visual Studio Code编写的，其他软件如DW，HBX等都是可以的；4.运行浏览器是谷歌，同时推荐使用谷歌浏览器；5.这个案例是我上学跟老师所讲做出来的，有些地方不是很完美，请见谅也请多赐教，若程序出现问题请指教，我在吸取经验、改正文档；
HTML、CSS学习笔记7（媒体查询、BootStrap）
m0_73809176的博客
03-21 683
注：引入——要么是bootstrap.css要么是 bootstrap.min.css（这两个源代码相同，只不过.min.css是格式化压缩好的，功能差不多。如果做项目可以选择Min，因为格式化了体积小）
html移动端显示,通过@media screen控制网站在移动端显示
weixin_35675138的博客
06-18 722
今天下午花点时间将本站css进行修改，通过@media screen max-width/min-width将本站在移动端浏览器下显示得更加友好。本站在分辨率宽度680px一下显示如下如果您在电脑端浏览本站使用的标准浏览器(ＩＥ９＋，ｆｉｒｅｆｏｘ，ｃｈｒｏｍｅ等)，可以缩小浏览器窗口大小到６８０ｐｘ以下可以看到效果。利用@media screen实现网页布局的自适应。优点：无需插件和手机主题,对...
响应式布局1. 媒体查询与弹性布局
stu_kk的博客
12-14 603
响应式布局笔记记录
CSS Media媒体查询使用大全，完整媒体查询总结
dengla6847的博客
07-16 2837
前面的话 　　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型 　　在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在 　　media属性用于为不同的媒介类型规定...
HTML表单和媒体查询
sh2001824的博客
07-15 207
html表单
HTML 5之媒体查询
程序员小白的博客
02-07 2266
媒体查询
BootStrap高级实战：响应式布局经典案例解析
"响应式布局-BootStrap从基础到项目实战 （高级篇）" Bootstrap 是一个流行的前端开发框架，由Twitter开发并开源，它极大地简化了创建响应式和移动优先的网页设计的过程。响应式布局是现代网页设计的关键，能够使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值