当前位置： 首页 > news >正文

【CSS】说说响应式布局

news 2026/5/15 18:22:37

目录

一、是什么

二、怎么实现

1、媒体查询

2、百分比

3、vw/vh

4、小结

三、总结

一、是什么

        响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

·        响应式网站常见特点：

  • 同时适配PC + 平板 + 手机等

  • 标签导航在接近手持终端设备时改变为经典的抽屉式导航

  • 网站的布局会根据视口来调整模块的大小和位置

二、怎么实现

        响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。

        可以使用 meta 标签的 viewport 属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  • viewport:即视图窗口，表示网页的可是区域；

  • width=device-width: 是自适应手机屏幕的尺寸宽度；

  • inital-scale:是缩放的初始化，也就是页面第一次加载时的缩放比例；

  • maximum-scale:是缩放比例的最大值，范围从0.0~10.0；

  • user-scalable:是用户的可以缩放的操作，“yes”表示允许缩放，“no”表示禁止缩放。

实现响应式布局的方式有如下：

  • 媒体查询
  • 百分比
  • vw/vh
  • rem

1、媒体查询

  CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表使用@Media查询，可以针对不同的媒体类型定义不同的样式，语法如下：

@media mediatype and|not|only (media feature) { CSS-Code;}
@media screen and (max-width: 1920px) { ... }

（当视口宽度小于1920px样式发生......改变）

@media screen (min-width: 400px) and (max-width: 600px) {body {font-size: 40px;}
}

(当视口宽度在大于等于400px并且小于等于600px，字体大小变为40px)

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式布局

2、百分比

        当浏览器的宽度或者高度发生变化时，可以通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

        但是每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式。

3、vw/vh

  vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

        但是每个属性都使用vh/vw，会照成布局的复杂度，所以不建议使用vh/vw来实现响应式。

4、小结

响应式设计实现通常会从以下几方面思考：

  • 弹性盒子（包括图片、表格、视频）和媒体查询等技术
  • 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
  • 使用相对单位使得内容自适应调节
  • 选择断点，针对不同断点实现不同布局和内容展示

三、总结

优点：

  • 面对不同分辨率设备灵活性强

  • 能够快捷解决多设备显示适应问题

缺点：

  • 兼容各种设备工作量大，效率低下
  • 代码累赘，会出现隐藏无用的元素，加载时间加长
  • 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

相关文章：

【CSS】说说响应式布局

目录 一、是什么 二、怎么实现 1、媒体查询 2、百分比 3、vw/vh 4、小结 三、总结 一、是什么 响应式设计简而言之&#xff0c;就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 响应式网站常见特点&#xff1a; 同时适配PC 平板 手机等…...

编程日记 2023/8/9 2:36:06

数据结构 | 利用二叉堆实现优先级队列

目录 一、二叉堆的操作 二、二叉堆的实现 2.1 结构属性 2.2 堆的有序性 2.3 堆操作 队列有一个重要的变体&#xff0c;叫作优先级队列。和队列一样&#xff0c;优先级队列从头部移除元素&#xff0c;不过元素的逻辑顺序是由优先级决定的。优先级最高的元素在最前&#xff…...

编程日记 2023/8/9 2:35:05

Javascript怎样阻止事件传播？

在 JavaScript 中&#xff0c;可以使用事件对象的方法来阻止事件传播。事件传播指的是当一个元素上触发了一个事件&#xff0c;该事件会在事件流中传播到父元素或祖先元素&#xff0c;从而影响到它们。 事件传播有三个阶段&#xff1a;捕获阶段、目标阶段和冒泡阶段。阻止事件…...

编程日记 2023/8/9 2:34:04

web-csrf

目录 CSRF与XSS的区别&#xff1a; get请求 原理&#xff1a; pikachu为例 post请求 pikachu为例 CSRF与XSS的区别&#xff1a; CSRF是借用户的权限完成攻击&#xff0c;攻击者并没有拿到用户的权限&#xff0c;而XSS是直接盗取到了用户的权限 get请求 原理&#xff1a;…...

编程日记 2023/8/9 2:33:02

数据结构—图的存储结构

6.图 回顾&#xff1a;数据的逻辑结构 集合——数据元素间除 “同属于一个集合” 外&#xff0c;无其他关系。 线性结构——一个对一个&#xff0c;如线性表、栈、队列 树形结构——一个对多个&#xff0c;如树 图形结构——多个对多个&#xff0c;如图 6.1图的定义和术语 图:…...

编程日记 2023/8/9 2:32:00

Vue3 中 setup，ref 和 reactive 的理解

setup Vue3中使用了Composition API这种写法&#xff0c;使得所有的组合API函数都在此使用, 只在初始化时执行一次。 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 ref 作用&#xff1a;定义一个数据的响应式 语法&#xff1a;const xxx ref(initValue) 一般用来…...

编程日记 2023/8/9 2:30:59

BL302嵌入式ARM控制器进行SQLite3数据库操作的实例演示

本文主要讲述了在钡铼技术BL302嵌入式arm控制器上运行 SQLite3 数据库的命令示例。SQLite3 是一个轻型的嵌入式数据库&#xff0c;不需要安装数据库服务器进程&#xff0c;占用资源低且处理速度快。 首先&#xff0c;需要将对应版本的 SQLite3 文件复制到设备的 /usr/ 目录下&…...

编程日记 2023/8/9 2:29:55

C++ 多线程：std::future

std::future std::future 简介示例1博客引用来源 std::future 简介 我们前面介绍的std::thread 是C11中提供异步创建多线程的工具&#xff0c;只能是异步运行任务&#xff0c;却无法获取任务执行的结果&#xff0c;一般都是依靠全局对象&#xff0c;全局对象在多线程下是及其不…...

编程日记 2023/8/9 2:28:54

断路器回路电阻试验

试验目的 断路器回路电阻主要取决于断路器动、 静触头的接触电阻, 其大小直接影响正常 运行时的发热情况及切断短路电流的性能, 是反应安装检修质量的重要数据。 试验设备 回路电阻测试仪 厂家&#xff1a; 湖北众拓高试代销 试验接线 对于单断口的断路器, 通过断口两端的接线…...

编程日记 2023/8/9 2:27:53

Python中的CALL_FUNCTION指令

在Python字节码中&#xff0c;CALL_FUNCTION指令后跟的数字代表这次函数调用需要从栈上取出的参数的数量。具体来说&#xff0c;这个数字包括位置参数和关键字参数的数量。 这个数字的低两位表示位置参数的数量&#xff0c;然后每两位表示一个关键字参数的数量。因此&#xff…...

编程日记 2023/8/9 2:26:52

微服务——es数据聚合+RestClient实现聚合

数据聚合 聚合的种类 DSL实现Bucket聚合 如图所示&#xff0c;设置了10个桶&#xff0c;那么就显示了数量最多的前10个桶&#xff0c;品牌含有7天酒店的有30家&#xff0c; 品牌含有如家的也有30家。 修改排序规则 限定聚合范围 DSL实现Metrics聚合 如下案例要求对不同的品…...

编程日记 2023/8/9 2:25:50

代码分析Java中的BIO与NIO

开发环境 OS&#xff1a;Win10&#xff08;需要开启telnet服务&#xff0c;或使用第三方远程工具&#xff09; Java版本&#xff1a;8 BIO 概念 BIO(Block IO)&#xff0c;即同步阻塞IO&#xff0c;特点为当客户端发起请求后&#xff0c;在服务端未处理完该请求之前&#xff…...

编程日记 2023/8/9 2:24:49

网络安全（黑客）工作篇

一、网络安全行业的就业前景如何&#xff1f; 网络安全行业的就业前景非常广阔和有吸引力。随着数字化、云计算、物联网和人工智能等技术的迅速发展&#xff0c;网络安全的需求持续增长。以下是网络安全行业就业前景的一些关键因素&#xff1a; 高需求&#xff1a;随着互联网的…...

编程日记 2023/8/9 2:23:45

zookeeper入门学习

zookeeper入门学习 zookeeper应用场景 分布式协调组件 客户端第一次请求发给服务器2&#xff0c;将flag值修改为false&#xff0c;第二次请求被负载均衡到服务器1&#xff0c;访问到的flag也会是false 一旦有节点发生改变&#xff0c;就会通知所有监听方改变自己的值&#…...

编程日记 2023/8/9 2:22:43

VirtualEnv 20.24.0 发布

导读VirtualEnv 20.24.0 现已发布&#xff0c;VirtualEnv 用于在一台机器上创建多个独立的 Python 运行环境&#xff0c;可隔离项目之间的第三方包依赖&#xff0c;为部署应用提供方便&#xff0c;把开发环境的虚拟环境打包到生产环境即可&#xff0c;不需要在服务器上再折腾一…...

编程日记 2023/8/9 2:21:42

LabVIEW开发高压航空航天动力系统爬电距离的测试

LabVIEW开发高压航空航天动力系统爬电距离的测试 更多电动飞机MEA技术将发电&#xff0c;配电和用电集成到一个统一的系统中&#xff0c;提高了飞机的可靠性和可维护性。更多的电动飞机使用更多的电能来用电动替代品取代液压和气动系统。对车载电力的需求不断增加&#xff0c;…...

编程日记 2023/8/9 2:20:40

【论文阅读】基于深度学习的时序异常检测——Anomaly Transformer

系列文章链接 数据基础&#xff1a;多维时序数据集简介 论文一&#xff1a;2022 Anomaly Transformer&#xff1a;异常分数预测 论文二&#xff1a;2022 TransAD&#xff1a;异常分数预测 论文链接&#xff1a;Anomaly Transformer.pdf 代码链接&#xff1a;https://github.co…...

编程日记 2023/8/9 2:19:39

Java并发总结

1.创建线程三种方式 Runnable.Callable接口使用继承Thread类的方式创建多线程Runnable 和Callable区别 Callable规定&#xff08;重写&#xff09;的方法是call()&#xff0c;Runnable规定&#xff08;重写&#xff09;的方法是run()。Callable的任务执行后可返回值&#xff0…...

编程日记 2023/8/9 2:18:35

视频汇聚平台EasyCVR视频广场侧边栏支持拖拽

为了提升用户体验以及让平台的操作更加符合用户使用习惯&#xff0c;我们在EasyCVR v3.3版本中&#xff0c;支持面包屑侧边栏的广场视频、分组列表、收藏这三个模块拖拽排序&#xff0c;并且该操作在视频广场、视频调阅、电子地图、录像回放等页面均能支持。 TSINGSEE青犀视频…...

编程日记 2023/8/9 2:17:34

MyCat分片规则——范围分片、取模分片、一致性hash、枚举分片

1.范围分片 2.取模分片 范围分片和取模分片针对数字类型的字段可以&#xff0c;但是针对于字符串类型的字段时。这两种就不适用了。 3.一致性hash 4.枚举分片 默认节点指的是&#xff0c;如果我们向数据库表插入数据的时候&#xff0c;超出了这个枚举值&#xff0c;那么默认向…...

编程日记 2023/8/9 2:16:32

VSCode搭配MinGW-w64打造Windows下C++开发环境：从安装、配置到调试一条龙

VSCode搭配MinGW-w64打造Windows下C开发环境&#xff1a;从安装、配置到调试一条龙 在Windows平台上进行C开发&#xff0c;选择合适的工具链往往能事半功倍。虽然Visual Studio提供了完整的解决方案&#xff0c;但许多开发者更青睐轻量级、高度可定制的VSCode编辑器。本文将带你…...

编程新知 2026/5/15 17:58:20

LZ4并行压缩：线程池设计与性能瓶颈突破的终极指南

LZ4并行压缩&#xff1a;线程池设计与性能瓶颈突破的终极指南 【免费下载链接】lz4 Extremely Fast Compression algorithm 项目地址: https://gitcode.com/GitHub_Trending/lz/lz4 LZ4作为一款Extremely Fast Compression algorithm&#xff0c;其并行压缩能力是提升处…...

编程新知 2026/5/15 17:02:09

ZoneMinder开源监控系统：30分钟打造专业级安防解决方案，支持IP/USB/模拟摄像头全兼容

ZoneMinder开源监控系统&#xff1a;30分钟打造专业级安防解决方案&#xff0c;支持IP/USB/模拟摄像头全兼容 【免费下载链接】zoneminder ZoneMinder is a free, open source Closed-circuit television software application developed for Linux which supports IP, USB and…...

编程新知 2026/5/15 16:43:37

CodMate：基于上下文感知的智能代码伴侣设计与实践

1. 项目概述&#xff1a;一个为开发者量身定制的代码伴侣如果你和我一样&#xff0c;每天大部分时间都在和代码编辑器、终端以及各种文档打交道&#xff0c;那你一定对“效率”这个词有很深的执念。我们总是在寻找能让自己写代码更快、调试更准、理解项目更轻松的工具。今天要聊…...

编程新知 2026/5/15 16:07:44

书匠策AI官网www.shujiangce.com｜别再硬扛了！这个AI把写期刊论文变成了“填空题“

微信公众号搜一搜「书匠策AI」&#xff0c;三分钟治好你的论文拖延症&#xff01; 各位还在深夜对着Word文档发呆的同学们&#xff0c;今天我不讲道理&#xff0c;只讲工具。 你们有没有想过一个问题&#xff1a;为什么写期刊论文这件事&#xff0c;让90%的人觉得痛苦&#xf…...

编程新知 2026/5/15 15:39:59

如何高效应用思源宋体：设计师的5个专业字体应用技巧

如何高效应用思源宋体&#xff1a;设计师的5个专业字体应用技巧 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为中文排版设计烦恼吗&#xff1f;思源宋体CN作为一款免费开源的专…...

编程新知 2026/5/15 13:11:59

如何高效配置编程字体：Maple Mono的进阶优化方案

如何高效配置编程字体&#xff1a;Maple Mono的进阶优化方案 【免费下载链接】maple-font Maple Mono: Open source monospace font with round corner, ligatures and Nerd-Font icons for IDE and terminal, fine-grained customization options. 带连字和控制台图标的圆角等…...

编程新知 2026/5/15 10:43:16

开源AI对话界面chat-ui：快速部署与定制化LLM前端实践

1. 项目概述&#xff1a;一个开源的AI对话界面如果你最近在折腾大语言模型&#xff08;LLM&#xff09;&#xff0c;不管是想部署一个私有的ChatGPT替代品&#xff0c;还是想给自己训练或微调的模型配一个像样的“脸面”&#xff0c;那你大概率绕不开一个核心问题&#xff1a;前…...

编程新知 2026/5/15 10:39:11

FanControl完全指南：Windows风扇智能调速终极解决方案

FanControl完全指南&#xff1a;Windows风扇智能调速终极解决方案 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa…...

编程新知 2026/5/15 10:24:49

3分钟解锁WeMod高级功能：Wand-Enhancer完全指南，免费获得Pro体验

3分钟解锁WeMod高级功能&#xff1a;Wand-Enhancer完全指南&#xff0c;免费获得Pro体验 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否曾经想过…...

编程新知 2026/5/15 8:36:33