响应式布局的五种方法
响应式布局的五种方法
- 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的对比
- rem和em都是相对单位
- rem相对于根元素
- 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响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小 举一…...
Javase学习文档------数组
Java 数组是 Java 编程中非常基础和重要的一个知识点。 以下是 Java 数组的主要学习内容： 数组的几个特点 数组在声明时必须指定长度，且长度不可变：数组的长度在声明时就需要确定，一旦确定就不能修改。因此，在使用数组…...
百度高德地图JS-API学习手记:地图基本设置与省市区数据加载
无论是百度还是高德地图开发，还是高德地图开发。官方的给的案例启示很多，copy再修改下，就完成了 概述-地图 JS API | 高德地图API 地图 JS API | 百度地图API SDK 这个大致看一下，我想。有点GIS基础都能完成地图开发。 个人认…...
c语言—指针详解***内存地址***指针字节数***注意事项
创作不易，本篇文章如果帮助到了你，还请点赞支持一下♡>𖥦<)!! 主页专栏有更多知识，如有疑问欢迎大家指正讨论，共同进步！ 给大家跳段街舞感谢支持！ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...
VMware虚拟机之WindowsXP系统超详细下载安装与使用教程
文章目录前言一、WindowsXP虚拟机系统下载二、WindowsXP虚拟机系统安装三、WindowsXP虚拟机系统使用总结前言 本博客的主要内容为使用VMware虚拟机下载安装与使用WindowsXP系统，WindowsXP系统虽然早已过时，但是仍对我们的学习有着很大的帮助，…...
【VMD-SSA-LSSVM】基于变分模态分解与麻雀优化Lssvm的负荷预测【多变量】（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
积极心态，助力人生成功
无论生活中遇到多少困难和挫折，只要我们保持积极心态、努力拼搏，就有望最终实现自己的梦想和目标。...
ADRC线性跟踪微分器(ST+SCL语言)
ADRC自抗扰相关算法源代码和公式请参看下面文章链接： ADRC/Matlab一步步实现跟踪微分器TD(附完整PLC测试代码链接)_ladrc线性跟踪微分器差分方程_RXXW_Dor的博客-CSDN博客关于Adrc的理论分析不是本篇博客的重点，主要也是能力所限，相关理论大家可以看韩京清教授的论文，专栏…...
Linux C/C++ 崩溃诊断大师：解锁软件问题定位与修复的秘密武器
让崩溃成为历史：详解有效诊断与解决技巧引言崩溃信息的类型设置信号处理函数（Setting up signal handlers）信号来源和上下文信息使用 siginfo_t 结构体获取信号来源信息使用 ucontext 结构体获取上下文信息将崩溃信息写入日志标准的信号处理函…...
ChatGPT能代替Oracle DBA吗？用Oracle OCP（1z0-083）的真题测试一下。
让我们来看看ChatGPT不能通过Oracle OCP的考试？ 文章目录引言测试过程总结和分析关于博主，姚远：Oracle ACE（Oracle和MySQL数据库方向）。Oracle MAA 大师。华为云MVP。《MySQL 8.0运维与优化》的作者。拥有 Oracle 10g和…...
《扬帆优配》二季度投资策略出炉 机构调仓换股露踪迹
随着多家上市公司公告发布，其发表的股东数据使得基金的最新持仓浮出水面。与此同时，组织也在密集调研中寻觅出资时机。站在二季度的起点，基金公司二季度出资策略渐次发表。多家基金公司以为，宏观经济将延续修正态势，仍…...
【SpringMVC】2—传统方式实现增删改查
⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以，麻烦各位看官顺手点个star~😊 如果文章对你有所帮助，可以点赞👍…...
图像阈值化
图像阈值化 图像阈值化简介 ⚫ 图像阈值化是图像处理的重要基础部分, 应用很广泛, 可以根据灰度差异来分割图像不同部分 ⚫ 阈值化处理的图像一般为单通道图像(灰度图) ⚫ 阈值化参数的设置可以使用滑动条来debug ⚫ 阈值化处理易光照影响, 处理时应注意 ⚫ 本节主要介绍…...
1.5 极限运算法则
思维导图： 我的理解： 如果一个数列{a_n}是一个无穷小，那么它的极限为0，即lim(n→∞)a_n0。同样地，如果另一个数列{b_n}也是一个无穷小，那么它的极限为0，即lim(n→∞)b_n0。 当我们考虑这两个无…...
首批因AI失业的人出现-某游戏公司裁掉半数原画师
如今各种AI爆火，不可避免的的会与某些功能撞车职业发生冲突，每一次生产力的变革，在带来技术进步与更高效率的同时，也都无可避免的会带来一波失业浪潮，当下的人工智能浪潮自然也不例外。 现在，第一批因为AI…...
)
字符串转换整数(atoi)
请你来实现一个 myAtoi(string s) 函数，使其能将字符串转换成一个 32 位有符号整数（类似 C/C 中的 atoi 函数）。 函数 myAtoi(string s) 的算法如下： 读入字符串并丢弃无用的前导空格 检查下一个字符（假设还未到字符…...
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…...
美国高速公路信号灯控制项目的大致逻辑和步骤 智慧公路设计
美国高速公路信号灯控制项目的大致逻辑和步骤： 美国那边先提供一个关于具体做什么需求、那边的设备（信号灯）有什么参数，什么接口，分别是什么属性等等的详细设计文档，开发人员拿到这个文档以后把它看懂&…...
数字电源专用IC，国产C2000, QX320F280049
一、特性参数 1、独立双核，32位CPU，单核主频400MHz 2、IEEE 754 单精度浮点单元 （FPU） 3、三角函数单元 （TMU） 4、1MB 的 FLASH （ECC保护） 5、1MB 的 SRAM （ECC保护&…...
第六章 ARM汇编语言程序设计【嵌入式系统】
第六章 ARM汇编语言程序设计【嵌入式系统】前言推荐第六章 ARM汇编语言程序设计6.1 概述6.2 ARM汇编语言指示符6.3 ARM编程举例6.4 ARM过程调用6.5 典型举例6.6 内嵌汇编C与汇编相互调用最后前言 以下内容源自《【嵌入式系统】》 仅供学习交流使用 推荐 无 第六章 ARM汇编语…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...