Day14：响应式网页

通过媒体查询、Bootstrap 框架完成腾讯全端网页响应式布局。


一、响应式布局方案

1、什么是响应式布局

它的主要特点是能够使网页根据不同的设备屏幕尺寸（如桌面电脑、平板电脑、手机等）和分辨率自动调整布局和显示效果，以提供最佳的用户体验。

  • 适应不同屏幕宽度：确保页面元素在各种屏幕大小下都能合理显示，不会出现内容溢出或布局混乱的情况。
  • 保持可读性和可用性：文字大小、按钮间距等元素会自动适配，方便用户操作和阅读。
  • 优化图片显示：图片会根据屏幕尺寸进行缩放，避免浪费带宽和加载时间。

这里以腾讯全端为例，当网页尺寸变化时，页面布局也跟着变化。

在这里插入图片描述

2、怎么实现响应式布局
  1. 媒体查询
@media (条件) {
  html {
    height: 300px;
    background-color: green;
  }
}
  1. Boostrap 框架

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


二、媒体查询

1、媒体查询完整写法（了解）

这里先讲一下媒体查询的完整写法：

@media 媒体类型 关键词 (媒体特性) {
  选择器 {
    样式
  }
}
  • 媒体类型

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

类型名称值描述
屏幕screen带屏幕的设备
打印预览print打印预览模式
阅读器speech屏幕阅读模式
不区分类型all默认值，包括以上3中情况
  • 关键词/逻辑操作符

（1）and
（2）only
（3）not

  • 媒体特性

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

特性名称属性值
视口的宽高width、height数值
视口的最大宽或高max-width、max-height数值
视口的最小宽或高min-width、min-height数值
屏幕方向orientationportrait: 竖屏
landscape: 横屏

媒体查询完整的写法了解就可以了，因为实际开发中，我们经常使用的是简写的写法，即：

@media (媒体特性) {
  选择器 {
    样式
  }
}
2、min-width 和 max-width

  • min-width：最小宽度，作为媒体特性的条件时，表示最小宽度等于 某个px 值时，即 当视口宽度 大于等于 某个px 值 时，媒体查询生效。

  • max-width：最大宽度，作为媒体特性的条件时，表示最大宽度等于 某个px 值时，即 当视口宽度 小于等于某个px 值 时，媒体查询生效。

3、书写顺序

当媒体特性是 max-width 和 min-width 时，书写顺序很重要，如果顺序错了，可能导致效果无法实现，因为 css 具有层叠性。

  • min-width：从小到大的书写顺序
  • max-width：从大到小的书写顺序

拿 min-width 举例，如果不按这个顺序写，比如先写 min-width:1200px，再写 min-width: 992px，当视口宽度大于 1200px 时，也满足大于 992px，因为 css 具有层叠性， min-widht: 992px 里面的代码会覆盖 min-width: 1200px里面的代码，导致当屏幕大于 1200px 时，无法显示 min-width: 1200px 里面的代码。所以要按照顺序，不能打乱顺序书写。

<head>
  <title>书写顺序</title>
  <style>
    /* 网页默认背景色是灰色 */
    body {
      background-color: #ccc;
    }

    /*
    如果不按这个顺序写，比如先写 min-width:1200，再写 min-width: 992
    当视口宽度大于1200，也满足大于 992，min-widht: 992 里面的代码会覆盖 min-width: 1200 里面的代码。所以要按照顺序，不能打乱顺序书写。
    
    min-width：大于等于某个px值才生效, 想象屏幕逐渐变大, 后面的媒体查询想要生效，只能px值越大，越往后面写，才能生效，书写顺序从小到大
    
    max-width：小于等于某个px值才生效, 想象屏幕逐渐变下, 后面的媒体查询想要生效，只能px值越小，越往后面写，才能生效，书写顺序从大到小
    */

    /* 屏幕宽度 大于等于 768px，网页背景色是粉色 min */
    @media (min-width: 768px) {
      body {
        background-color: pink;
      }
    }

    /* 屏幕宽度 大于等于 992px，网页背景色是绿色 min */
    @media (min-width:992px) {
      body {
        background-color: green;
      }
    }

    /* 屏幕宽度 大于等于 1200px，网页背景色是 skyblue  min */
    @media (min-width: 1200px) {
      body {
        background-color: skyblue;
      }
    }
  </style>
</head>
4、媒体查询-外部CSS

在实际开发项目中，如果使用媒体查询的次数或代码很少时，可以将代码写在内部样式表中，如果媒体查询用到的次数或代码很多，可以在使用link标签在引入外部CSS时进行媒体查询，满足媒体查询时 html 才加载 CSS 文件，当不满足媒体查询时，html 移除这个 CSS 文件，CSS 文件中就不需要在写媒体查询了，只需要正常写 CSS 代码就行。

  • 完整写法 （了解）
<link rel="stylesheet" media="媒体类型 逻辑操作符 (媒体查询)" href="xx.css">
// 当视口宽度小于等于 768px 时，引入 pink.css 这个文件
<link rel="stylesheet" media="screen and (max-width: 768px)" href="./pink.css">
  • 简写写法（常用）
<link rel="stylesheet" media=" (媒体查询)" href="xx.css">
// 当视口宽度大于等于 1200px 时，引入 green.css 这个文件
<link rel="stylesheet" media="(min-width: 1200px)" href="./green.css">

这种写法是动态加载 CSS，只有满足媒体查询时，html 才加载 CSS 文件，当不满足的时候，html 就移除这个 CSS 文件，并不是满足时加载之后，就一直加载了，不满足时还会移除这个 CSS 文件。


三、Bootstrap

1、Bootstrap 简介

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

2、Bootstrap 下载
  • 下载步骤：Bootstrap 中文文档 → 下载 → Bootstrap 生产文件

在这里插入图片描述

3、Bootstrap 使用

这里只简单的讲解一下 Bootstrap 的使用，这个框架功能很多，如果要全部讲解，能够专门开一个专栏讲解了。网上也有很多讲解这个框架怎么使用的博客是视频，感兴趣的同学可以自行去找。

  1. 将下载解压好的文件拖入到工程。

  2. 引入 Bootstraps CSS 文件

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名：container：响应式布局版心居中类。
<div class="container">版心居中</div>
4、Bootstrap 栅格系统

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

例如：一行排 4 个盒子，则每个盒子占 3 份，即（12 / 4 = 3）。

在这里插入图片描述

在这里插入图片描述

使用栅格布局，要使用类名为 row 的元素作为父级，子级才能使用栅格系统布局。

栅格系统布局以 col-*-* 的格式作为类名，如：col-xl-3 表示当视口宽度大于等于 1200px 时，该元素占了 3 份，即该元素宽度占视口宽度的 1/4 。

估计这对于新接触这个框架的同学有很多疑问，为什么这么写类名、为什么这么写就能实现这些功能等等，但是这些类名的命名和写法是框架开发者规定的，必须这么写，我们只能通过多写多练，将这些常用的类名记住，没有其他捷径。

下面通过一个例子，帮助大家理解：

<head>
  <title>栅格系统</title>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>

<body>
  <!-- 
    视口宽度大于等于1200px，一个盒子占3份, 即一行排4个
    视口宽度大于等于768px，一个盒子占6份, 即一行排2个
    视口宽度大于等于576px，一个盒子占12分, 即一行排1个
    ...
    没有书写顺序的要求
   -->
  <!-- 版心 → row → 子级 -->
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6 col-xl-3" style="background-color: red;">1</div>
      <div class="col-sm-12 col-md-6 col-xl-3" style="background-color: yellow;">2</div>
      <div class="col-sm-12 col-md-6 col-xl-3" style="background-color: green;">3</div>
      <div class="col-sm-12 col-md-6 col-xl-3" style="background-color: pink;">4</div>
    </div>
  </div>
</body>

在这里插入图片描述

5、Bootstrap Button 类

Bootstrap 提供了很多 Button 类 的样式，也不用刻意去背，使用的时候知道在哪里找就可以了。

在这里插入图片描述

6、Bootstrap 表格类

Bootstrap 提供了很多 表格类 的样式，感兴趣的同学可以去看一看。

在这里插入图片描述

此外，Bootstrap 还提供了现成的组件、字体图标等等，感兴趣的同学可以了解下。


四、综合案例-腾讯全端

接下来通过今日所学的媒体查询和 Bootstrap 框架，模仿腾讯全端实现下面的响应式布局效果。

在这里插入图片描述

想要完整代码的，点击这里获取Day14综合案例完整代码。完全免费，仅供学习参考使用。



在这里插入图片描述

乾坤未定，你我皆是黑马


本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/688119.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

解决：Navicat导入sql脚本时报2006

解决：Navicat导入sql脚本时报2006

目录 问题复现原因分析解决办法问题小结 1) MySQL 服务宕了 2) mysql连接超时 3) mysql请求链接进程被主动kill 4) Your SQL statement was too large. 问题复现 今天在用Navicat 16.0.6导入.sql文件时&#xff0c;运行一半就报错了。错误如下&#xff1a; [E…
阅读更多...
FPGA新起点V1开发板（十）——按键控制LED

FPGA新起点V1开发板（十）——按键控制LED

文章目录 一、实验任务二、代码展示三、管脚分配 一、实验任务 二、代码展示 module key_led(input sys_clk,input rst_n,input [3:0] key,output reg [3:0] led);// reg define reg [23:0] cnt; reg [1:0] led_ctrl;//0.2s计数器 always (posed…
阅读更多...
开发一个Dapp需要多少？

开发一个Dapp需要多少？

区块链开发一个Dapp要多少钱&#xff1f; 开发一个去中心化应用&#xff08;Dapp&#xff09;的成本取决于多个因素&#xff0c;包括Dapp的复杂性、功能需求、区块链平台以及开发团队的经验水平。以下是一些主要的影响因素&#xff1a; 1. 区块链平台&#xff1a;不同区块链…
阅读更多...
利用梯度提升树分类法实现乳腺癌数据集分类

利用梯度提升树分类法实现乳腺癌数据集分类

目录 1. 作者介绍2. 梯度提升树算法2.1 Boosting 算法2.2 Boosting Tree &#xff08;提升树&#xff09;2.3 梯度提升树&#xff08;Gradient Boosting Tree&#xff09; 3. 利用梯度提升树分类法实现乳腺癌数据集分类实验3.1 乳腺癌数据集介绍3.2 实验过程3.3 实验结果3.4 完…
阅读更多...
C语言数据结构(排序算法总结)

C语言数据结构(排序算法总结)

目录 算法类型 算法比较 稳定性描述 插入排序 选择排序 冒泡排序 希尔排序 堆排序 快速排序 霍尔排序&#xff08;递归&#xff09; 挖坑法&#xff08;递归&#xff09; 双指针&#xff08;递归&#xff09; 快排(非递归) 归并排序 计数排序 总结&#xff08;速…
阅读更多...
华为端云一体化开发 （起步1.0）（HarmonyOS学习第七课）

华为端云一体化开发 （起步1.0）（HarmonyOS学习第七课）

官方文献&#xff1a; 为丰富HarmonyOS对云端开发的支持、实现端云联动&#xff0c;DevEco Studio推出了云开发功能&#xff0c;开发者在创建工程时选择云开发模板&#xff0c;即可在DevEco Studio内同时完成HarmonyOS应用/元服务的端侧与云侧开发&#xff0c;体验端云一体化协…
阅读更多...
ChatGPT交卷2024年高考新课标I卷语文关于AI方面的作文试题

ChatGPT交卷2024年高考新课标I卷语文关于AI方面的作文试题

2024年新课标I卷作文试题&#xff1a; 阅读下面的材料&#xff0c;根据要求写作。&#xff08;60分&#xff09; 随着互联网的普及、人工智能的应用&#xff0c;越来越多的问题能很快得到答案。那么&#xff0c;我们的问题是否会越来越少&#xff1f; 以上材料引发了你怎样的…
阅读更多...
CarSim车辆运动轨迹绘制

CarSim车辆运动轨迹绘制

CarSim车辆运动轨迹绘制 CarSim中与车辆位置有关的信息分别为Xo和Yo 输出到Simulink中 导入到工作空间中保存&#xff0c;low_carsim_path.mat &#xff0c;绘制结果曲线&#xff0c;low_carsim_path_comp.m data csvread(low_two_path.csv,1,0); low_two_path_x data(:,1)…
阅读更多...
【FAS】《CN103106397B》

【FAS】《CN103106397B》

原文 CN103106397B-基于亮瞳效应的人脸活体检测方法-授权-2013.01.19 华南理工大学 方法 / 点评 核心方法用的是传统的形态学和模板匹配&#xff0c;亮点是双红外发射器做差分 差分&#xff1a;所述FPGA芯片控制两组红外光源&#xff08;一近一远&#xff09;交替亮灭&…
阅读更多...
DVWA-XSS(Reflected)

DVWA-XSS(Reflected)

反射型XSS可以用来窃取cookie Low 输入1111进行测试&#xff0c;发现1111被打印 输入<script>alert(document.cookie)</script>&#xff0c;出现弹窗&#xff0c;获得cookie Medium 查看后端代码&#xff0c;发现对<script>进行了转义&#xff0c;但是…
阅读更多...
codeforces round 949 div2

codeforces round 949 div2

A Turtle and Piggy Are Playing a Game 题目&#xff1a; 思路&#xff1a;输出2的幂次b使得2^b为最大的不超过x的数 代码&#xff1a; #include <iostream>using namespace std;const int N 2e5 10;void solve() {int l, r;cin >> l >> r;if(r % 2) …
阅读更多...
大小堆运用巧解数据流的中位数

大小堆运用巧解数据流的中位数

​​​​​​​​​​ 一、思路 我们将所有数据平分成两份&#xff0c;前面那一部分用小堆来存&#xff0c;后面的部分用大堆来存&#xff0c;这样我们就能立刻拿到中间位置的值。 如果是奇数个数字&#xff0c;那么我们就将把中间值放在前面的大堆里&#xff0c;所以会有两种…
阅读更多...
华为设备动态路由OSPF（单区域+多区域）实验

华为设备动态路由OSPF（单区域+多区域）实验

动态路由OSPF的配置 OSPF分类两种情况&#xff1a;单区域 多区域路由 OSPF单区域路由配置 OSPF&#xff1a;开放最短路径优先的路由协议。属于大型动态路由协议&#xff0c;适用于中大型的园区网。 网络拓扑&#xff1a; 配置步骤&#xff1a; 1.完成基本配置&#xff08;略&a…
阅读更多...
代码随想录算法训练营第30天|回溯复习篇

代码随想录算法训练营第30天|回溯复习篇

回溯基础理论 1.回溯的本质是利用递归进行暴力搜索&#xff0c;将符和条件的结果集搜索出来 2.回溯法常见的问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合排列问题&#xff1a;N个数按一定规则全排列&#xff0c;有几种排列方式切割问题&#x…
阅读更多...
fastadmin/thinkPHPQueue消息队列详细教程

fastadmin/thinkPHPQueue消息队列详细教程

thinkphp-queue 是thinkphp 官方提供的一个消息队列服务，它支持消息队列的一些基本特性： 消息的发布，获取，执行，删除，重发，失败处理，延迟执行，超时控制等队列的多队列， 内存限制 ，启动，停止，守护等消息队列可降级为同步执行1、通过composer安装thinkPHP消息队列 …
阅读更多...
kafka-消费者-指定offset消费（SpringBoot整合Kafka）

kafka-消费者-指定offset消费（SpringBoot整合Kafka）

文章目录 1、指定offset消费1.1、创建消费者监听器‘1.2、application.yml配置1.3、使用 Java代码 创建 主题 my_topic1 并建立3个分区并给每个分区建立3个副本1.4、创建生产者发送消息1.4.1、分区0中的数据 1.5、创建SpringBoot启动类1.6、屏蔽 kafka debug 日志 logback.xml1…
阅读更多...
算法003：快乐数

算法003：快乐数

这道题采用快慢双指针的方法。 为了弄清楚这个题到底是要我们干嘛&#xff0c;我们把整个过程类比一下&#xff1a; 不管是n19还是n2&#xff0c;我们都把它当成一种判断链表是否有环的方式。 对于n19&#xff0c;题干是这样解释的&#xff1a; 我们把它当成链表&#xff0c…
阅读更多...
如何挑选最适合你的渲染工具

如何挑选最适合你的渲染工具

随着技术的发展&#xff0c;云渲染平台逐渐成为设计师、动画师、影视制作人员等创意工作者的得力助手。然而&#xff0c;市场上的云渲染平台种类繁多&#xff0c;如何选择最适合自己的渲染工具成为了一个需要认真考虑的问题。 在挑选适合自己的云渲染工具时&#xff0c;我们需…
阅读更多...
YOLOv10涨点改进：原创自研 | GhostNet融合 | 从廉价的操作中生成更多的特征图

YOLOv10涨点改进：原创自研 | GhostNet融合 | 从廉价的操作中生成更多的特征图

文章目录 GhostNet理论基础实验部分改进方案新增yolov10s-ghost.yaml文件代码运行GhostNet理论基础 Ghost Module是一种模型压缩的方法，即在保证网络精度的同时减少网络参数和计算量，从而提升计算速度（speed），降低延时（latency）。Ghost 模块可以代替现有卷积网络中的每…
阅读更多...
OpenAI模型规范概览

OpenAI模型规范概览

这是OpenAI对外分享的模型规范文档&#xff08;Model Spec&#xff09;&#xff0c;它定义了OpenAI希望在API接口和ChatGPT&#xff08;含GPT系列产品&#xff09;中模型的行为方式&#xff0c;这也是OpenAI超级对齐团队奉行的行为准则&#xff0c;希望能对国内做RLHF的同学有帮…
阅读更多...
最新文章

Copyright @ 2022~2023