Day14：响应式网页

news2024/10/4 22:47:03

通过媒体查询、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综合案例完整代码。完全免费，仅供学习参考使用。



在这里插入图片描述

乾坤未定，你我皆是黑马


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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Django 里的表格内容做修改

Django 里的表格内容做修改

当Django里表格内容需要做修改&#xff0c;可以这么操作。 先看效果图 修改后的表格 1. 先得在 asset_list.html 里修改。你们的html有可能跟我不一样 <table border"1px"><thead><tr><th>ID</th><th>标题</th><th…
阅读更多...
千问Qwen7B chat：本地部署及网页端使用

千问Qwen7B chat：本地部署及网页端使用

基于前面的安装经验&#xff0c;千问大模型的本地部署并不算难&#xff0c;主要时间用在大模型文件的下载上。同时系统运行对硬件也有较高的要求&#xff0c;本机的硬件配置为N卡3060&#xff0c;显存12G。 使用conda创建虚拟环境&#xff0c;主要版本如下&#xff1a; Pyth…
阅读更多...
代码随想录算法训练营第30天|回溯复习篇

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

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

算法003：快乐数

这道题采用快慢双指针的方法。 为了弄清楚这个题到底是要我们干嘛&#xff0c;我们把整个过程类比一下&#xff1a; 不管是n19还是n2&#xff0c;我们都把它当成一种判断链表是否有环的方式。 对于n19&#xff0c;题干是这样解释的&#xff1a; 我们把它当成链表&#xff0c…
阅读更多...
麒麟v10系统arm64架构openssh9.7p1的rpm包

麒麟v10系统arm64架构openssh9.7p1的rpm包

制作openssh 说明 理论上制作的多个rpm在arm64架构&#xff08;aarch64&#xff09;都适用 系统信息&#xff1a;4.19.90-17.ky10.aarch64 GNU/Linux 升级前备份好文件/etc/ssh、/etc/pam.d等以及开启telnet 升级后确认正常后关闭telnet 在之前制作过openssh-9.5p1基础上继续…
阅读更多...
算法题--华为od机试考试（围棋的气、用连续自然数之和来表达整数、亲子游戏）

算法题--华为od机试考试（围棋的气、用连续自然数之和来表达整数、亲子游戏）

目录 围棋的气 题目描述 输入描述 示例1 输入 输出 解析 答案 用连续自然数之和来表达整数 题目描述 输入描述 输出描述 示例1 输入 输出 说明 示例2 输入 输出 解析 答案 亲子游戏 题目描述 输入描述 输出描述 示例1 输入 输出 说明 示例2 输入…
阅读更多...
SpringBoot项目启动后访问网页显示“Please sign in“

SpringBoot项目启动后访问网页显示“Please sign in“

SpringBoot启动类代码如下 SpringBoot项目启动后访问网页显示"Please sign in"&#xff0c;如图 这是一个安全拦截页面&#xff0c;即SpringSecurity认证授权页面&#xff0c;因为SecurityAutoConfiguration是Spring Boot提供的安全自动配置类&#xff0c;也就是说它…
阅读更多...
使用onnxruntime加载YOLOv8生成的onnx文件进行目标检测

使用onnxruntime加载YOLOv8生成的onnx文件进行目标检测

在网上下载了60多幅包含西瓜和冬瓜的图像组成melon数据集&#xff0c;使用 LabelMe 工具进行标注&#xff0c;然后使用 labelme2yolov8 脚本将json文件转换成YOLOv8支持的.txt文件&#xff0c;并自动生成YOLOv8支持的目录结构&#xff0c;包括melon.yaml文件&#xff0c;其内容…
阅读更多...
React 18

React 18

创建 React 18 脚手架项目 全局安装 create-react-app npm install -g create-react-app yarn global add create-react-app . 确认是否已安装 create-react-app npm list -g create-react-app yarn global list | grep create-react-app . 如果安装失败 有时&#xff0…
阅读更多...
Vue3整合Tailwindcss之padding样式类

Vue3整合Tailwindcss之padding样式类

04 常用基础样式 padding 样式类 什么是内边距 基础样式 ClassPropertiesp-0padding: 0px;px-0padding-left: 0px; padding-right: 0px;py-0padding-top: 0px; padding-bottom: 0px;ps-0padding-inline-start: 0px;pe-0padding-inline-end: 0px;pt-0padding-top: 0px;pr-0pa…
阅读更多...
JVM 运行流程

JVM 运行流程

JVM 是 Java 运行的基础&#xff0c;也是实现一次编译到处执行的关键&#xff0c;那么 JVM 是如何执行的呢&#xff1f; JVM 执行流程 程序在执行之前先要把java代码转换成字节码&#xff08;class 文件&#xff09;&#xff0c; JVM 首先需要把字节码通过一定的 方式 类加…
阅读更多...
华为面经整理

华为面经整理

文章目录 实习第一面准备提问相关算法相关 第一面结果提问环节 总结 实习 第一面准备 提问相关 操作系统有哪些功能 进程管理&#xff1a; 进程调度、进程同步和通信、多任务处理 内存管理&#xff1a; 内存分配、虚拟内存技术、内存保护 文件系统管理&#xff1a; 文件存储…
阅读更多...
MMUNet:形态学特征增强网络在结肠癌病理图像分割中的应用

MMUNet:形态学特征增强网络在结肠癌病理图像分割中的应用

MMUNet: Morphological feature enhancement network for colon cancer segmentation in pathological images. 发表在&#xff1a;Biomedical Signal Processing and Control2024--影响因子&#xff1a;3.137 南华大学的论文 论文地址&#xff1a;main.pdf (sciencedirecta…
阅读更多...
【ffmpeg】本地格式转换 mp4转wav||裁剪mp4

【ffmpeg】本地格式转换 mp4转wav||裁剪mp4

个人感受&#xff1a;太爽了&#xff01;&#xff01;&#xff01;&#xff08;可能用惯了转换网站和无良的转换软件&#xff09; ———— 使用FFmpeg把mp4文件转换为WAV文件 - 简书 (jianshu.com) FFMPEG 视频分割和合并 - 简书 (jianshu.com) ———— 示例 ffmpeg -i …
阅读更多...
计算机组成结构—IO接口（IO控制器）

计算机组成结构—IO接口（IO控制器）

目录 一、I/O 接口的功能 二、I/O 接口的基本结构 1. 总线连接的数据通路 2. I/O 接口的基本组成 三、I/O 端口及其编址 1. 统一编址 2. 不统一编址 四、I/O 接口的类型 两个系统或两个部件之间的交接部分&#xff0c;一般就称为 接口。接口可以是硬件上两种设备间的连…
阅读更多...
哈夫曼树的创建

哈夫曼树的创建

要了解哈夫曼树&#xff0c;可以先了解一下哈夫曼编码&#xff0c;假设我们有几个字母&#xff0c;他们的出现频率是A: 1 B: 2 C: 3 D: 4 E: 5 F: 6 G: 7。那么如果想要压缩数据的同时让访问更加快捷&#xff0c;就要让频率高的字母离根节点比较进&#xff0c;容易访问&#xf…
阅读更多...
微生物共生与致病性：动态变化与识别挑战

微生物共生与致病性：动态变化与识别挑战

谷禾健康 细菌耐药性 抗生素耐药性细菌感染的发生率正在上升&#xff0c;而新抗生素的开发由于种种原因在制药行业受重视程度下降。 最新在《柳叶刀-微生物》&#xff08;The Lancet Microbe&#xff09;上&#xff0c;科学家提出了基于细菌适应性、竞争和传播的生态原则的跨学…
阅读更多...
个人vsCode配置文件＜setting.js＞

个人vsCode配置文件＜setting.js＞

个人vsCode配置文件setting.js 快速打开1、使用快捷键 CtrlShiftP &#xff0c;然后搜索setting2、手动 自用配置 快速打开 1、使用快捷键 CtrlShiftP &#xff0c;然后搜索setting 2、手动 自用配置 {"terminal.integrated.profiles.windows": {"PowerShell&…
阅读更多...
阿里云对象存储OSS简单使用

阿里云对象存储OSS简单使用

文章目录 概念基本概念Bucket 准备工作控制台操作对象存储OSSJava客户端操作对象存储OSS参考来源 概念 基本概念 阿里云对象存储 OSS是一款海量、安全、低成本、高可靠的云存储服务&#xff0c;提供最高可达 99.995 % 的服务可用性。而且提供了多种存储类型&#xff0c;降低我…
阅读更多...
顶顶通呼叫中心中间件-asr录音路径修改(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-asr录音路径修改(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-asr录音路径修改(mod_cti基于FreeSWITCH) 录音路径模板。如果不是绝对路径&#xff0c;会把这个路径追加到FreeSWITCH的recordings后面。支持变量&#xff0c;比如日期 ${strftime(%Y-%m-%d)}。最后一个录音文件路径会保存到变量 ${cti_asr_last_record_…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023