响应式布局的五种方法
响应式布局的五种方法
- 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汇编语…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
Python训练营-Day26-函数专题1：函数定义与参数
题目1：计算圆的面积 任务： 编写一个名为 calculate_circle_area 的函数，该函数接收圆的半径 radius 作为参数，并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求：函数接收一个位置参数 radi…...