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 …...
猫抓：创新视角下的浏览器资源嗅探技术完全指南
猫抓：创新视角下的浏览器资源嗅探技术完全指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓（cat-catch）…...
6种专业计时模式！OBS高级计时器插件让你的直播时间管理精准到秒
6种专业计时模式！OBS高级计时器插件让你的直播时间管理精准到秒 【免费下载链接】obs-advanced-timer 项目地址: https://gitcode.com/gh_mirrors/ob/obs-advanced-timer 还在为直播时间控制而烦恼吗？OBS Advanced Timer计时器插件就是你的救星&…...
5G NR（新空口）物理层设计解析
5G NR（新空口）物理层设计解析 在无线通信技术的演进过程中，5G NR（新空口）作为第五代移动通信技术的核心组成部分，其物理层设计承载着提升数据传输速率、降低时延、增强连接密度等多重目标。本文将围绕5G NR…...
回声干扰导致TTS通过率暴跌41%？ElevenLabs生产环境回声抑制黄金配置，仅限内部团队使用的7项阈值标准
更多请点击： https://intelliparadigm.com 第一章：回声干扰对TTS语音质量的致命影响 回声干扰（Echo Interference）是实时TTS（Text-to-Speech）系统在语音合成与播放耦合场景中极易被忽视却极具破坏性的声学…...
基因组数据压缩技术SAGe：原理、优化与应用
1. 基因组数据压缩技术概述基因组测序技术的快速发展使得单个全基因组测序成本已降至数百美元级别，但随之而来的数据存储与传输压力却呈指数级增长。以Illumina NovaSeq 6000测序仪为例，单次运行可产生高达6TB的原始数据，这对医疗机构的存储基…...
Sendwithus模板与现代邮件客户端兼容性测试：终极解决方案
Sendwithus模板与现代邮件客户端兼容性测试：终极解决方案 【免费下载链接】templates Sendwithus Open Source Email Templates 项目地址: https://gitcode.com/gh_mirrors/temp/templates Sendwithus Open Source Email Templates是一套强大的开源邮件模板集…...
ChartGPT：用自然语言重塑数据可视化的智能革命
ChartGPT：用自然语言重塑数据可视化的智能革命 【免费下载链接】chart-gpt AI tool to build charts based on text input 项目地址: https://gitcode.com/gh_mirrors/ch/chart-gpt 在数据驱动决策的时代，图表已成为信息传递的通用语言。然而&…...
ComfyUI MixLab Nodes：3分钟掌握AI多模态创作平台，彻底改变你的创意工作流
ComfyUI MixLab Nodes：3分钟掌握AI多模态创作平台，彻底改变你的创意工作流 【免费下载链接】comfyui-mixlab-nodes Workflow-to-APP、ScreenShare&FloatingVideo、GPT & 3D、SpeechRecognition&TTS 项目地址: https://gitcode.com/gh_mirr…...
别再写一堆CASE WHEN了！PostgreSQL里COALESCE和NULLIF这两个函数，帮你把SQL写得又短又稳
告别冗长SQL：用PostgreSQL的COALESCE和NULLIF重构条件逻辑 在数据处理的世界里，SQL就像是我们与数据库对话的语言。但你是否经常遇到这样的情况：为了处理各种空值和边界条件，你的SQL查询变成了一个由无数CASE WHEN语句组成的庞然大…...
Python锚点链接解析利器pyanchor：高效处理HTML/Markdown文档内部链接
1. 项目概述：一个Python实现的锚点链接解析利器最近在整理一个大型文档项目时，遇到了一个挺头疼的问题：我需要从成千上万个Markdown文件中，批量提取所有指向文档内部特定章节的锚点链接，并验证这些链接是否有效。手动操…...