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

响应式布局的五种方法

news 2026/5/19 2:44:01

响应式布局的五种方法

  • 1.百分比布局
  • 2.rem布局
  • 3. 媒体查询 @media screen
  • 4. flex布局
  • 5.vw 和 vh

响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。

1.百分比布局

1.有父元素就相对于父元素
2.没有父元素就相对于视口的大小

举一个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box2{width: 80%;height: 100px;background: red;}.box{width: 50%;height: 100px;background: yellow;}.box1{width: 50%;height: 50%;background: blue;}</style>
</head>
<body><div class="box"><div class="box1"></div></div><div class="box2"></div>
</body>
</html>

2.rem布局

rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

rem和em的对比

  1. rem和em都是相对单位
  2. rem相对于根元素
  3. em相对于父元素

例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> %和rem 布局</title><style>html {font-size: 30px;}.box {font-size: 10px;}.box2 {width: 10rem;height: 10rem;background-color: plum;}.box {width: 10em;height: 10em;background-color: aquamarine;}</style>
</head><body><div class="box"><div class="box1"></div></div><div class="box2"></div>
</body></html>

3. 媒体查询 @media screen

例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>@media screen</title><style>.box {width: 10rem;height: 10rem;background-color: pink;margin-left: 20rem;}/*  如果屏幕的宽大于1200px，它执行此css */@media screen and (min-width: 1200px) {html {font-size: 20px;}}/*  如果屏幕的宽小于1200px，它执行此css */@media screen and (max-width: 1200px) {html {font-size: 10px;}}</style>
</head><body><div class="box"></div>
</body></html>

4. flex布局

5.vw 和 vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

例如

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 100vw;height: 100vh;background: red;}.box1{width: 50vw;height: 50vh;background: blue;}</style>
</head>
<body><div class="box"><div class="box1"></div></div>
</body>
</html>

相关文章：

响应式布局的五种方法

响应式布局的五种方法1.百分比布局2.rem布局3. 媒体查询 media screen4. flex布局5.vw 和 vh响应式布局是同一页面在不同的屏幕上有不同的布局&#xff0c;即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小 举一…...

编程日记 2023/5/9 8:54:54

Javase学习文档------数组

Java 数组是 Java 编程中非常基础和重要的一个知识点。 以下是 Java 数组的主要学习内容&#xff1a; 数组的几个特点 数组在声明时必须指定长度&#xff0c;且长度不可变&#xff1a;数组的长度在声明时就需要确定&#xff0c;一旦确定就不能修改。因此&#xff0c;在使用数组…...

编程日记 2023/5/23 16:24:00

百度高德地图JS-API学习手记:地图基本设置与省市区数据加载

无论是百度还是高德地图开发&#xff0c;还是高德地图开发。官方的给的案例启示很多&#xff0c;copy再修改下&#xff0c;就完成了 概述-地图 JS API | 高德地图API 地图 JS API | 百度地图API SDK 这个大致看一下&#xff0c;我想。有点GIS基础都能完成地图开发。 个人认…...

编程日记 2023/4/23 0:19:33

c语言—指针详解***内存地址***指针字节数***注意事项

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...

编程日记 2023/5/14 16:41:02

VMware虚拟机之WindowsXP系统超详细下载安装与使用教程

文章目录前言一、WindowsXP虚拟机系统下载二、WindowsXP虚拟机系统安装三、WindowsXP虚拟机系统使用总结前言 本博客的主要内容为使用VMware虚拟机下载安装与使用WindowsXP系统&#xff0c;WindowsXP系统虽然早已过时&#xff0c;但是仍对我们的学习有着很大的帮助&#xff0c;…...

编程日记 2023/5/25 15:25:12

【VMD-SSA-LSSVM】基于变分模态分解与麻雀优化Lssvm的负荷预测【多变量】（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/29 5:38:47

积极心态，助力人生成功

无论生活中遇到多少困难和挫折&#xff0c;只要我们保持积极心态、努力拼搏&#xff0c;就有望最终实现自己的梦想和目标。...

编程日记 2023/5/25 15:25:44

ADRC线性跟踪微分器(ST+SCL语言)

ADRC自抗扰相关算法源代码和公式请参看下面文章链接： ADRC/Matlab一步步实现跟踪微分器TD(附完整PLC测试代码链接)_ladrc线性跟踪微分器差分方程_RXXW_Dor的博客-CSDN博客关于Adrc的理论分析不是本篇博客的重点，主要也是能力所限，相关理论大家可以看韩京清教授的论文，专栏…...

编程日记 2023/5/26 19:44:12

Linux C/C++ 崩溃诊断大师：解锁软件问题定位与修复的秘密武器

让崩溃成为历史&#xff1a;详解有效诊断与解决技巧引言崩溃信息的类型设置信号处理函数&#xff08;Setting up signal handlers&#xff09;信号来源和上下文信息使用 siginfo_t 结构体获取信号来源信息使用 ucontext 结构体获取上下文信息将崩溃信息写入日志标准的信号处理函…...

编程日记 2023/6/1 6:58:03

ChatGPT能代替Oracle DBA吗？用Oracle OCP（1z0-083）的真题测试一下。

让我们来看看ChatGPT不能通过Oracle OCP的考试&#xff1f; 文章目录引言测试过程总结和分析关于博主&#xff0c;姚远&#xff1a;Oracle ACE&#xff08;Oracle和MySQL数据库方向&#xff09;。Oracle MAA 大师。华为云MVP。《MySQL 8.0运维与优化》的作者。拥有 Oracle 10g和…...

编程日记 2023/4/23 0:23:42

《扬帆优配》二季度投资策略出炉 机构调仓换股露踪迹

随着多家上市公司公告发布&#xff0c;其发表的股东数据使得基金的最新持仓浮出水面。与此同时&#xff0c;组织也在密集调研中寻觅出资时机。站在二季度的起点&#xff0c;基金公司二季度出资策略渐次发表。多家基金公司以为&#xff0c;宏观经济将延续修正态势&#xff0c;仍…...

编程日记 2023/5/22 4:06:36

【SpringMVC】2—传统方式实现增删改查

⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 如果文章对你有所帮助&#xff0c;可以点赞&#x1f44d;…...

编程日记 2023/5/28 0:29:02

图像阈值化

图像阈值化 图像阈值化简介 ⚫ 图像阈值化是图像处理的重要基础部分, 应用很广泛, 可以根据灰度差异来分割图像不同部分 ⚫ 阈值化处理的图像一般为单通道图像(灰度图) ⚫ 阈值化参数的设置可以使用滑动条来debug ⚫ 阈值化处理易光照影响, 处理时应注意 ⚫ 本节主要介绍…...

编程日记 2023/5/28 0:30:35

1.5 极限运算法则

思维导图&#xff1a; 我的理解&#xff1a; 如果一个数列{a_n}是一个无穷小&#xff0c;那么它的极限为0&#xff0c;即lim(n→∞)a_n0。同样地&#xff0c;如果另一个数列{b_n}也是一个无穷小&#xff0c;那么它的极限为0&#xff0c;即lim(n→∞)b_n0。 当我们考虑这两个无…...

编程日记 2023/5/15 3:05:36

首批因AI失业的人出现-某游戏公司裁掉半数原画师

如今各种AI爆火&#xff0c;不可避免的的会与某些功能撞车职业发生冲突&#xff0c;每一次生产力的变革&#xff0c;在带来技术进步与更高效率的同时&#xff0c;也都无可避免的会带来一波失业浪潮&#xff0c;当下的人工智能浪潮自然也不例外。 现在&#xff0c;第一批因为AI…...

编程日记 2023/5/22 4:08:06

字符串转换整数(atoi)

请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格 检查下一个字符&#xff08;假设还未到字符…...

编程日记 2023/5/27 5:51:56

Servlet练习

练习准备 编写Student和StudentDao package beans;public class Student{private String num;private String name;public Student(){}public String getNum() {return num;}public String getName() {return name;}public void setNum(String num) {this.num num;}public v…...

编程日记 2023/5/9 9:03:39

美国高速公路信号灯控制项目的大致逻辑和步骤 智慧公路设计

美国高速公路信号灯控制项目的大致逻辑和步骤&#xff1a; 美国那边先提供一个关于具体做什么需求、那边的设备&#xff08;信号灯&#xff09;有什么参数&#xff0c;什么接口&#xff0c;分别是什么属性等等的详细设计文档&#xff0c;开发人员拿到这个文档以后把它看懂&…...

编程日记 2023/5/11 14:06:40

数字电源专用IC，国产C2000, QX320F280049

一、特性参数 1、独立双核&#xff0c;32位CPU&#xff0c;单核主频400MHz 2、IEEE 754 单精度浮点单元 &#xff08;FPU&#xff09; 3、三角函数单元 &#xff08;TMU&#xff09; 4、1MB 的 FLASH &#xff08;ECC保护&#xff09; 5、1MB 的 SRAM &#xff08;ECC保护&…...

编程日记 2023/5/27 14:08:05

第六章 ARM汇编语言程序设计【嵌入式系统】

第六章 ARM汇编语言程序设计【嵌入式系统】前言推荐第六章 ARM汇编语言程序设计6.1 概述6.2 ARM汇编语言指示符6.3 ARM编程举例6.4 ARM过程调用6.5 典型举例6.6 内嵌汇编C与汇编相互调用最后前言 以下内容源自《【嵌入式系统】》 仅供学习交流使用 推荐 无 第六章 ARM汇编语…...

编程日记 2023/5/12 8:31:51

基于OpenCV与MediaPipe的手势与头部姿态控制鼠标实现

1. 项目概述&#xff1a;解放双手的鼠标控制新范式最近在GitHub上看到一个挺有意思的项目&#xff0c;叫ShafwanAbd/handsfree-mouse。顾名思义&#xff0c;这是一个“免提鼠标”项目&#xff0c;核心目标是通过摄像头捕捉你的手势或头部动作&#xff0c;来替代传统的物理鼠标&…...

编程新知 2026/5/19 0:52:31

基于MCP协议构建AI智能体实时加密资讯数据源实战

1. 项目概述&#xff1a;一个为AI智能体打造的实时加密资讯“雷达”如果你正在开发一个需要实时了解加密货币市场动态的AI智能体&#xff0c;比如一个自动交易机器人、一个市场分析助手&#xff0c;或者一个社区内容生成器&#xff0c;那么你肯定遇到过这样的痛点&#xff1a;如…...

编程新知 2026/5/19 0:48:00

别再被Nginx的rewrite循环搞懵了！一个真实Vue项目部署的500错误排查实录

从Nginx重定向死循环到优雅解决&#xff1a;Vue项目部署的深度排错指南 凌晨三点&#xff0c;服务器监控突然告警——刚上线的Vue企业门户网站出现大面积500错误。查看日志时&#xff0c;那个令人窒息的rewrite or internal redirection cycle错误信息让整个运维团队陷入沉思。…...

编程新知 2026/5/19 0:32:56

机器学习中的视觉与自然语言处理

一两个月前看了李飞飞老师的自传&#xff0c;看第一页就觉得 这是对A国的表白。当然也会遗憾&#xff0c;希望她小时候遇到的老师是更好的老师&#xff0c;她家周围遇到的人是更好的人。这是概率问题&#xff0c;在过去可能不够好今天会更好。 重点是当我看到她在思考智能的起源…...

编程新知 2026/5/18 22:34:49

机器人抓取技能自动化：从仿真学习到现实迁移的实践指南

1. 项目概述与核心价值最近在机器人抓取领域&#xff0c;一个名为simpliolabs/manus-open-claw-skill-hunter-and-developer的项目引起了我的注意。乍一看这个标题&#xff0c;它像是一个开源工具或框架&#xff0c;核心围绕着“机械手开放爪具”的“技能猎人”与“开发者”。这…...

编程新知 2026/5/18 22:15:40

AI智能体技能体系构建指南：从Awesome列表到实战应用

1. 项目概述&#xff1a;从“Awesome”列表到智能体技能体系的构建在AI智能体开发领域&#xff0c;我们常常面临一个核心困境&#xff1a;如何让一个智能体&#xff08;Agent&#xff09;具备解决复杂、多样化任务的能力&#xff1f;是投入大量资源从头训练一个“全能”模型&am…...

编程新知 2026/5/18 21:58:45

FiveM 新手服主必看：开源与托管（闭源）到底是什么

大家好&#xff0c;我是难言&#xff0c;你们的老朋友了。在 FiveM 生态深耕多年&#xff0c;我发现许多新手服主对开源与托管&#xff08;闭源&#xff09;插件的概念认知模糊&#xff0c;甚至无法区分二者的核心差异。更不合理的是&#xff0c;圈内逐渐形成鄙视链&#xff0c…...

编程新知 2026/5/18 21:24:49

Emacs实时语法检查优化：flymake-cursor插件实现光标悬停提示

1. 项目概述&#xff1a;Emacs 实时语法检查的得力助手如果你是一个 Emacs 用户&#xff0c;并且主要用它来写代码&#xff0c;那么你一定对“实时语法检查”这个功能不陌生。在编写代码时&#xff0c;能够即时看到潜在的错误、拼写问题或者代码风格警告&#xff0c;这能极大地…...

编程新知 2026/5/18 20:31:07

MASA全家桶汉化包完整教程：让Minecraft模组界面彻底中文化

MASA全家桶汉化包完整教程&#xff1a;让Minecraft模组界面彻底中文化 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 还在为MASA模组复杂的英文界面而烦恼吗&#xff1f;作为中文Minec…...

编程新知 2026/5/18 20:03:05

RT-Thread实战：AB32VG1驱动I2C OLED屏实现上电自启动

1. 项目概述与核心思路最近在折腾中科蓝讯的AB32VG1开发板&#xff0c;想用它来驱动一块I2C接口的OLED屏幕。在网上搜了一圈&#xff0c;发现大部分教程都停留在“官方例程”的层面——也就是在RT-Thread的msh&#xff08;类似shell的命令行&#xff09;里输入指令来测试驱动。…...

编程新知 2026/5/18 19:39:28