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 …...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...