CSS响应式布局
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5
月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。
要实现响应式布局，常用的方式有以下几种：
- 使用 CSS 中的媒体查询（最简单）；
- 使用 JavaScript（使用成本比较高）；
- 使用第三方开源框架（例如 bootstrap，可以很好的支持各种浏览器）。
接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
设置 meta 标签
首先，我们需要设置 meta 标签来告诉浏览器，让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放，如下所示：
在设置视口时需要注意，视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：
- viewport：即视口，表示网页的可视区域；
- width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
- initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
- maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
- minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
- user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。
媒体查询
CSS 媒体查询可以根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS
样式，让使用不同设备的用户都能得到最佳的体验。
关于媒体查询有以下三种实现方式：
1、直接在 CSS 文件中使用，示例代码如下：
@media (max-width: 320px) {/*0~320*/body {background: pink;}}@media (min-width: 321px) and (max-width: 375px) {/*321~768*/body {background: red;}}@media (min-width: 376px) and (max-width: 425px) {/*376~425*/body {background: yellow;}}@media (min-width: 426px) and (max-width: 768px) {/*426~768*/body {background: blue;}}@media (min-width: 769px) {/*769~+∞*/body {background: green;}}
2、使用 @import 导入，示例代码如下：
@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)@import 'index02.css' screen and (max-width:720px)
3、在 link 标签中使用，示例代码如下：
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/><link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
更多关于媒体查询的介绍大家可以查阅《CSS媒体查询》一节。
下面通过一个综合的示例来演示一下响应式布局的实现：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>响应式布局</title><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" /><style>*{margin: 0px;padding: 0px;font-family: "微软雅黑";}#head, #foot, #main{height: 100px;width: 1200px;/*width: 85%;*/background-color: goldenrod;text-align: center;font-size: 48px;line-height: 100px;margin: 0 auto;}#head div{display: none;font-size: 20px;height: 30px;width: 100px;background-color: green;float: right;line-height: 30px;margin-top: 35px;}#head ul{width: 80%;}#head ul li{width: 20%;float: left;text-align: center;list-style: none;font-size: 20px;}#main{height: auto;margin: 10px auto;overflow: hidden;}.left, .center, .right{height: 600px;line-height: 600px;float: left;width: 20%;background-color: red}.center{width: 60%;border-left: 10px solid #FFF;border-right: 10px solid #FFF;box-sizing: border-box;}@media only screen and (max-width: 1200px) {#head, #foot, #main{width: 100%;}}@media only screen and (max-width: 980px) {.right{display: none;}.left{width: 30%;}.center{width: 70%;border-right: hidden;}}@media only screen and (max-width: 640px) {.left, .center, .right{width: 100%;display: block;height: 200px;line-height: 200px;}.center{border: hidden;border-top: 10px solid #FFFFFF;border-bottom: 10px solid #FFFFFF;height: 600px;line-height: 600px;}#head ul{display: none;}#head div{display: block;}}</style> </head><body><div><header id="head"><ul><li>header1</li><li>header2</li><li>header2</li><li>header2</li><li>header2</li></ul><div>icon</div></header><section id="main"><div class="left">left</div><div class="center">center</div><div class="right">right</div></section><footer id="foot">footer</footer></div></body></html>
当浏览器窗口小于 1200 像素大于 980 像素时，页面的样式如下图所示：
当浏览器窗口大于 640 像素小于 980 像素时，页面的样式如下图所示：
当浏览器窗口小于 640 像素时，页面的样式如下图所示：
原文地址CSS响应式布局
相关文章：
CSS响应式布局
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。…...
AI大模型书籍丨掌握 LLM 和 RAG 技术，这本大模型小鸟书值得一看！
本指南旨在帮助数据科学家、机器学习工程师和机器学习/AI 架构师探索信息检索与 LLMs 的集成及其相互增强。特别聚焦于 LLM 和检索增强生成（RAG）技术在信息检索中的应用，通过引入外部数据库与 LLMs 的结合，提高检索系统的性能。 …...
Mysql和Oracle使用差异和主观感受
这两种常用的关系型数据库有何差异？ 支持和社区 MySQL：有一个活跃的开源社区，用户可以获取大量的文档和支持。 Oracle：提供了专业的技术支持，但通常需要额外的费用。 易用性 MySQL：通常被认为是更易于学…...
【Java】—— File类与IO流：File类的实例化与常用方法
目录 1. java.io.File类的使用 1.1 概述 1.2 构造器 1.3 常用方法 1、获取文件和目录基本信息 2、列出目录的下一级 3、File类的重命名功能 4、判断功能的方法 5、创建、删除功能 1.4 练习 练习1： 练习2： 练习3： 1. java.io.Fil…...
C++设计模式——装饰器模式
欢迎来到 破晓的历程的 博客 ⛺️不负时光，不负己✈️ 什么是装饰器模式？ 装饰器模式（Decorator Pattern）是一种结构型设计模式，允许你向一个现有的对象添加新的功能，同时又不改变其结构。这种模式通过创…...
C#使用ITextSharp生成PDF文件实例详解
许多项目开发中需要生成PDF， 常规办法使用官方提供的Microsoft.Office.Interop.Worddll插件，但是这种方法需要完全安装OFFICE，另外版本不一致还会出现很多错误。一般不推荐使用。 下面介绍这种巧妙的用法，定能事半功倍。 本文使用ITextSharp完成功能。 首先，通过NuGet…...
10.9QT对话框以及QT的事件机制处理
MouseMoveEvent(鼠标移动事件) widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 设置窗口为无边框，去掉标题栏等装饰this->setWi…...
SiLM266x系列SiLM2661高压电池组前端充/放电高边NFET驱动器 为电池系统保护提供可靠性和设计灵活性
SiLM2661产品概述： SiLM2661能够灵活的应对不同应用场景对锂电池进行监控和保护的需求，为电池系统保护提供可靠性和设计灵活性。是用于电池充电/放电系统控制的低功耗、高边 N 沟道 FET 驱动器，高边保护功能可避免系统的接地引脚断开连接&am…...
linux中sed命令详解
sed 是 Linux 中的一个流编辑器（stream editor），主要用于处理文本的编辑和转换。它可以从文件或标准输入读取内容，然后根据指定的模式和指令对数据进行处理，最后输出修改后的结果。它的强大之处在于可以通过脚本或命令…...
vue 模板语法
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML解析器解析。 文本插值 最基本的数据绑定形式是文本插值，它使用的是…...
bladex漏洞思路总结
Springblade框架介绍： SpringBlade是一个基于Spring Boot和Spring Cloud的微服务架构框架，它是由商业级项目升级优化而来的综合型项目。 0x1 前言 最近跟一些大佬学习了blade的漏洞，所以自己总结了一下，在渗透测试过程中&#x…...
解决SqlServer自增主键使用MybatisPlus批量插入报错问题
报错 SqlServer 表中主键设置为自增，会报以下错误。 org.springframework.jdbc.UncategorizedSQLException: Error getting generated key or setting result to parameter object. Cause: com.microsoft.sqlserver.jdbc.SQLServerException: 必须执行该语句才能获…...
leetcode:反转字符串中的单词III
题目链接 string reverse(string s1) {string s2;string::reverse_iterator rit s1.rbegin();while (rit ! s1.rend()){s2 *rit;rit;}return s2; } class Solution { public:string reverseWords(string s) {string s1; int i 0; int j 0; int length s.length(); for (i …...
深度学习常见问题
1.YOLOV5和YOLOV8的区别 YOLOv5 和 YOLOv8 是两个版本的 YOLO（You Only Look Once）目标检测算法，它们在网络架构、性能优化、功能扩展等方面有显著的区别。YOLOv5 是 YOLO 系列的重要改进版本，而 YOLOv8 是最新的一次重大升级&am…...
神经网络的一些benchmark示例
1.MLPerf https://github.com/mlcommons/inference?tabreadme-ov-file https://docs.mlcommons.org/inference/benchmarks/text_to_image/sdxl/ MLPerf 是一个业界标准的机器学习基准测试套件，旨在评估各种硬件、框架和模型的性能。它包含训练和推理两个部分&…...
如何进行统级架构设计
统级架构设计是一个复杂的过程，需要综合考虑业务需求、技术选型、系统可扩展性、可维护性等多个方面。以下是一份系统级架构设计的方法论，包括以下几个步骤： 需求分析： 与业务相关人员进行深入沟通，了解业务需求、业…...
鼓组编写：SsdSample鼓映射 GM Map 自动保存 互换midi位置 风格模板 逻辑编辑器
SsdSample音源的键位映射 方便编写鼓的技巧 可以这样去设置键位关系的面板和钢琴卷帘窗的面板，方便去写鼓。 可以先按GM的midi标准去写鼓，然后比对下鼓的键位映射的关系，去调整鼓。 可以边看自己发b站等处的图文笔记，然后边用电…...
使用YOLOv11进行视频目标检测
使用YOLOv11进行视频目标检测 完整代码 import cv2 from ultralytics import YOLOdef predict(chosen_model, img, classes[], conf0.5):if classes:results chosen_model.predict(img, classesclasses, confconf)else:results chosen_model.predict(img, confconf)return r…...
DEEP和DeepBook V3将于10月14日推出
10月14日星期一，DeepBook V3和DEEP token将同时在Sui上线。这两个公告标志着Sui生态内流动性发展的重要时刻，同时引入了去中心化和治理机制。 经过数月的开发，基于Sui构建的安全且完全链上的中央限价订单簿（Central Limit Order …...
学习之高阶编程列表推导式,字典推导式
def test_list_one(): “”“快速生成一个[“data0”, “data1”,]列表”“” list1 [] for i in range(100): list1.append(“data{}”.format(i)) return list1 def test_list_two(): “”" 快速生成一个[“data0”, “data1”,]列表 列表推导式：[x for x …...
QT实现QInputDialog中文按钮
这是我记录Qt学习过程心得文章的第三篇，主要是为了方便QInputDialog输入框的使用，通过自定义的方式，按钮中文化，统一封装成一个函数，还是写在了Skysonya类里面。 实现代码： //中文按钮文本输入对话框 QSt…...
Redis 常用指令技术解读
全文目录： 前言前言摘要简介概述Redis的核心特性Redis指令分类 核心源码解读SET和GET指令EXPIRE指令HSET和HGET指令LPUSH和LPOP指令SADD和SMEMBERS指令ZADD和ZRANGE指令 案例分析案例1：用户登录会话管理案例2：排行榜实现 应用场景演示优缺点分…...
Web前端入门
文章目录 前言1 Web前端概述1.1 网站和网页1.2 HTML语言1.3 网页的形成1.4 常用浏览器1.5 浏览器内核（渲染引擎)1.6 web标准 2 HTML标签2.1 开发工具2.2 HTML语法规则2.3 标签的关系2.4 HTML注释标签2.5 结构标签 3 常用标签3.1 标题标签3.2 段落标签3.3 换行标签3.…...
贝塞尔曲线详细讲解，如何用 Canvas 绘制三阶贝塞尔曲线？
比如我们要画一个这样的曲线，我们该怎么画了 两个点Y轴一样高，起点：（200,100）终点：（300，100）中间的弧度怎么弄了？ <canvas id"c1" width"6…...
Ubuntu20.04卸载ros2 foxy版本安装ros1 noetic版本
前言 如果你ubuntu中没有ros，可以试着直接从鱼香ros一键安装包指令处开始。 卸载ros2 sudo apt-get remove ros-*接下来如果你直接使用鱼香ros的一键安装命令，会出错。 设置源 设置源，这里使用的是中科大的。 sudo sh -c . /etc/lsb-r…...
PicGo+Gitee搭建Typora图床
PicGoGitee搭建Typora图床 下载PicGo 下载链接：https://picgo.github.io/PicGo-Doc/zh/guide/#%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85 配置PicGo 插件安装 在PicGo的【插件设置】中搜索gitee-uploader插件并安装 在【图床设置】下配置Gitee repo：用…...
MySQL 脱敏函数使用详解：保护数据隐私的关键手段
全文目录： 前言前言为什么需要数据脱敏？MySQL 中常用的脱敏方法1. 字符串类型数据的脱敏案例：脱敏姓名案例：脱敏邮箱 2. 数字类型数据的脱敏案例：脱敏手机号案例：脱敏身份证号 3. 自定义脱敏函数自定义姓名…...
nginx之virtual host
vhost 是“virtual host”的缩写，中文译为“虚拟主机”。在Web服务器（如Nginx、Apache等）中，虚拟主机是指在同一台物理服务器上运行多个独立的网站或应用程序的技术。每个虚拟主机都有自己的域名、文档根目录、配置文件等…...
Windows 下纯手工打造 QT 开发环境
用过 QtCreator 和 VS QT 插件，都觉得不是很理想。所以有了这个想法。 手工打造的 QT 的开发环境，是不需要安装上面两个程序的。 1、下载 vcpkg，编译 QT6 下载地址：https://github.com/microsoft/vcpkg.git 进入到 …...
k8s的安装和部署
配置三台主机，分别禁用各个主机上的swap，并配置解析 systemctl mask swap.target swapoff -a vim /etc/fstab配置这三个主机上的主机以及harbor仓库的主机 所有主机设置docker的资源管理模式为system [rootk8s-master ~]# vim /etc/docker/daemon.json…...