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

如何通过rem实现移动端的适配？

news 文章来源：https://blog.csdn.net/weixin_48082900/article/details/129276435 2025/1/31 20:37:43

一、rem、em、vw\vh的区别：

rem：参照HTML根元素的font-size

em：参照自己的font-size

vw/vh：将视口宽高平分100等份，数值就是所占比例

<!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>
</head>
<style>/* rem参照HTML 根元素的font-size 1rem=font-size  */.rem {/* margin-top是参照屏幕宽度的50% *//* margin-top: 50%; */width: 10rem;height: 10rem;background-color: yellowgreen;}/* em参照自己的font-size,如果自己没有就往上找, 最后数值是自己font-size的多少倍 *//* font-size:16px 20em= 20*16px= 320px  */.em {width: 20em;height: 20em;background-color: plum;}/* 将视口宽高平分100等份,数值就是所占比例 */.vw {width: 20vw;height: 20vh;background-color: pink;}
</style><body><div class="rem">rem</div><div class="em">em</div><div class="vw">vw/vh</div>
</body></html>

二、媒体查询语法

/* 媒体查询的语法 */@media mediaType and (media feather) {选择器 {属性名：属性值}}/* 多个条件用and连接 */@media mediaType and (media feather) and (media feather) {选择器 {属性名：属性值}}

1.mediaType设备类型：
     all:所有的多媒体设备
     print:打印机或打印预览
     screen：电脑屏幕、平板电脑、智能手机等
     speech：屏幕阅读器等发声设备

2.media feather:媒体特性表达式
      width：浏览器的宽度
      height:浏览器的高度
      max-width：最大宽度
      min-width:最小宽度
      device-width:设备宽度
      device-height:设备高度
      max-device-width:最大设备宽度
      min-device-width:最小设备宽度     
3.操作符

and：与、和
not: 用来排除掉某些特定的设备的，比如 @media not print（非打印设备)
only: 用来定某种特别的媒体类型，比如 @media only screen（只能在screen设备使用）

三、通过媒体查询实现rem适配

<!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>
</head>
<style>@media screen and (max-width:320px) {html {font-size: 16px;}}@media screen and (min-width:320px) and (max-width:375px) {html {font-size: 18px;}}@media screen and (min-width:375px) {html {font-size: 20px;}}.box {width: 20rem;height: 20rem;background-color: plum;}
</style><body><div class="box">盒子</div>
</body></html>

相关文章：

如何通过rem实现移动端的适配？

一、rem、em、vw\vh的区别&#xff1a; rem&#xff1a;参照HTML根元素的font-size em&#xff1a;参照自己的font-size vw/vh&#xff1a;将视口宽高平分100等份&#xff0c;数值就是所占比例 <!DOCTYPE html> <html lang"en"><head><meta…...

编程日记 2023/3/1 14:19:12

【论文阅读】-姿态识别

记录论文阅读&#xff0c;希望能了解我方向的邻域前沿吧 粗读 第一篇 ATTEND TO WHO YOU ARE: SUPERVISING SELF-ATTENTION FOR KEYPOINT DETECTION AND INSTANCE-AWARE ASSOCIATION 翻译&#xff1a;https://editor.csdn.net/md?not_checkout1&spm1001.2014.3001.5352…...

编程日记 2023/3/1 14:16:31

3.1 模拟栈+表达式求值

模拟栈 题目链接 栈的数组模拟非常简单&#xff0c;不详细描述 设置一个指针指向栈顶第一个元素即可 STL中stack实现已经更新在STL_Stack #include<iostream> #include<string>using namespace std;const int N1e51; int m; string s; int stack[N]; int p;//指针…...

编程日记 2023/3/1 14:15:24

【Python语言基础】——Python 创建表

Python语言基础——Python 创建表 文章目录 Python语言基础——Python 创建表一、Python 创建表一、Python 创建表 创建表 如需在 MySQL 中创建表，请使用 “CREATE TABLE” 语句。 请确保在创建连接时定义数据库的名称。 实例 创建表 “customers”： import mysql.connector…...

编程日记 2023/3/1 14:14:17

外贸建站，为什么别人的询盘更多更精准？

大多企业进行外贸建站的目的就是想要获得更多的精准询盘&#xff0c;但是具体该如何做&#xff0c;大多企业都没有方向&#xff0c;要么就是在网上看各种不系统的文章学着操作&#xff0c;要么就找个建站公司做好网站就不管了&#xff0c;而最终结果都不甚理想。那么怎样才能让…...

编程日记 2023/3/1 14:12:48

Gateway集成Netty服务

Gateway和Netty都有盲区的感觉&#xff1b; 一、Netty简介 Netty是一个异步的&#xff0c;事件驱动的网络应用框架&#xff0c;用以快速开发高可靠、高性能的网络应用程序。 传输服务&#xff1a;提供网络传输能力的管理&#xff1b; 协议支持&#xff1a;支持常见的数据传输…...

编程日记 2023/3/1 14:11:39

SpringMVC控制层private方法中出现注入的service对象空指针异常

一、现象 SpringMVC中controller里的private接口中注入的service层的bean为null&#xff0c;而同一个controller中访问修饰符为public和protected的方法不会出现这样的问题。 controller中的方法被AOP进行了代理&#xff0c;普通Controller如果没有AOP&#xff0c;private方法…...

编程日记 2023/3/1 14:10:32

【Unity】P4 脚本文件（基础）

Unity脚本文件&#xff08;基础&#xff09;适配的C#代码编辑器如何添加一个脚本文件获取蘑菇当前位置基础代码改变物体位置帧与帧更新前言 上一篇博文主要围绕Unity Inspector部分&#xff0c;围绕组件&#xff0c;资源文件&#xff0c;父子节点部分做介绍。 链接&#xff1a;…...

编程日记 2023/3/1 14:09:18

（2023版）零基础入门网络安全/Web安全，收藏这一篇就够了

由于我之前写了不少网络安全技术相关的文章和回答&#xff0c;不少读者朋友知道我是从事网络安全相关的工作&#xff0c;于是经常有人私信问我&#xff1a; 我刚入门网络安全&#xff0c;该怎么学&#xff1f; 要学哪些东西&#xff1f; 有哪些方向&#xff1f; 怎么选&#x…...

编程日记 2023/3/1 14:08:00

Vue3电商项目实战-登录模块2【05-登录-表单校验、06-登录-消息提示组件封装、07-登录-账户登录、08-登录-手机号登录、09-退出登录】

文章目录05-登录-表单校验06-登录-消息提示组件封装07-登录-账户登录08-登录-手机号登录09-退出登录05-登录-表单校验 文档&#xff1a;https://vee-validate.logaretm.com/v4/ 支持vue3.0 第一步&#xff1a;安装 执行命令 npm i vee-validate4.0.3 第二步&#xff1a;导入 …...

编程日记 2023/3/1 14:06:38

Python 中都有哪些常见的错误和异常？

本文首发自「慕课网」&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注&#xff01; 作者| 慕课网精英讲师 朱广蔚 Python 程序的执行过程中&#xff0c;当发生错误时会引起一个事件&#xff0c;该事件被称为异常。例如&#xff1a; 如果程…...

编程日记 2023/3/1 14:05:26

51单片机-1

1&#xff0c;单片机内部集成了CPU&#xff0c;RAM&#xff0c;ROM&#xff0c;定时器&#xff0c;中断系统&#xff0c;通讯接口等一系列电脑的常用硬件功能。单片机和计算机相比&#xff0c;单片机是一个袖珍版计算机 2&#xff0c;单片机里有中央处理器&#xff08;CPU&…...

编程日记 2023/3/1 14:04:04

【Azure 架构师学习笔记】-Azure Data Factory (4)-触发器详解-事件触发器

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Data Factory】系列。 接上文【Azure 架构师学习笔记】-Azure Data Factory (3)-触发器详解-翻转窗口 前言 事件触发指的是存储事件&#xff0c;所以在新版的ADF 中&#xff0c;已经明确了是“存储事件”&#xff0c;…...

编程日记 2023/3/1 14:02:49

【项目设计】高并发内存池(三)[CentralCache的实现]

&#x1f387;C学习历程&#xff1a;入门 博客主页&#xff1a;一起去看日落吗持续分享博主的C学习历程博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 也许你现在做的事情&#xff0c;暂时看不到成果&#xff0c;但不要忘记&…...

编程日记 2023/3/1 14:01:42

2023年，35岁测试工程师只能被“优化裁员”吗？肯定不是····

国内的互联网行业发展较快&#xff0c;所以造成了技术研发类员工工作强度比较大&#xff0c;同时技术的快速更新又需要员工不断的学习新的技术。因此淘汰率也比较高&#xff0c;超过35岁的基层研发类员工&#xff0c;往往因为家庭原因、身体原因&#xff0c;比较难以跟得上工作…...

编程日记 2023/3/1 13:59:26

gitlab部署使用，jenkins部署使用

gitlab部署使用&#xff0c;jenkins部署使用在线安装gitlab下载gitlab安装gitlab使用gitlab设置中文修改管理员密码创建组,创建项目,创建用户jenkins下载jenkins安装jenkin使用jenkins更改管理员密码配置拉取代码配置登录gitlab拉取代码的账号密码配置项目配置gitlab仓库配置构…...

编程日记 2023/3/1 13:58:11

从零开始的机械臂yolov5抓取gazebo仿真（环境搭建篇下）

sunday功能包使用介绍以及开源 sunday我给自己机械臂的命名&#xff0c;原型是innfos的gluon机械臂。通过sw模型文件转urdf。Sunday项目主要由六个功能包sunday_description、sunday_gazebo、sunday_moveit_config、yolov5_ros、vacuum_plugin、realsense_ros_gazebo组成&…...

编程日记 2023/3/1 13:56:57

GCC编译器 MinGW的下载安装使用教程

哎 总所周知 gcc可以用来编译C 和C。在linux广泛应用&#xff0c;那么window怎么使用gcc呢。就要用到gcc的window工具----MInGW&#xff0c;安装好之后&#xff0c;直接可以在windows的dos界面编译。下面讲解安装使用过程。1.官网下载MinGW - Minimalist GNU for Windows downl…...

编程日记 2023/3/1 13:55:51

【项目实战】SpringMVC配置全局属性，是实现WebMvcConfigurer接口，还是直接继承WebMvcConfigurationSupport类？

一、说明 官方推荐以下两种方式来配置全局的SpringMVC的相关属性 方式一：实现WebMvcConfigurer接口（推荐）方式二：直接继承WebMvcConfigurationSupport类。介绍一下两者区别吧。 二、 WebMvcConfigurer介绍 WebMvcConfigurer是一个接口，用于配置全局的SpringMVC的相关属…...

编程日记 2023/3/1 13:54:40

房产营销、地产中介如何高效低成本获客？

数字化对企业而言&#xff0c;机遇和挑战并存。房产企业可借助数字化加强日益扩大的业务规模和业务领域管理&#xff0c;以提升管理效率&#xff0c;降低管理难度&#xff1b;基于数字化技术加强客户的服务体验&#xff0c;进而收集多业态客户和场景数据&#xff0c;拓展创新业…...

编程日记 2023/3/1 13:53:31

Kotlin-作用域函数

在对象的上下文中执行代码块。当您在提供lambda表达式的对象上调用这样的函数时&#xff0c;它会形成一个临时作用域。在此范围内&#xff0c;可以不带名称地访问对象。这样的函数称为作用域函数。 let run with apply also 作用域函数不会引入任何新的技术功能&#xff0c;但它…...

编程日记 2023/3/1 13:52:18

QNX7.1 交叉编译开源库

1.下载QNX7.1 SDK并解压 ITL:~/work/tiqnx710$ ls -l 总用量 16 drwxrwxr-x 4 xxx4096 1月 28 13:38 host -rwxrwxr-x 1 xxx 972 1月 28 13:38 qnxsdp-env.bat -rwxrwxr-x 1 xxx 1676 1月 28 13:38 qnxsdp-env.sh drwxrwxr-x 3 xxx 4096 1月 28 13:38 target xxxITL:~/work/ti…...

编程日记 2023/3/1 13:49:58

论文投稿指南——中文核心期刊推荐（外国语言）

【前言】 &#x1f680; 想发论文怎么办&#xff1f;手把手教你论文如何投稿&#xff01;那么&#xff0c;首先要搞懂投稿目标——论文期刊 &#x1f384; 在期刊论文的分布中&#xff0c;存在一种普遍现象&#xff1a;即对于某一特定的学科或专业来说&#xff0c;少数期刊所含…...

编程日记 2023/3/1 13:48:48

Fabric系列 - 链码-内部链码的特性

(1)Fabric repo下的案例 Chaincode(1.4的目录结构) fabric/examples/chaincode/go ├── example02 #一个简单的转账合约 ├── eventsender #发送事件通知 ├── passthru #调用其他链码(或者其他channel的链码)example02 (转账) 一个简单的转账合约。该链码简单实…...

编程日记 2023/3/1 13:47:39

NetApp SnapCenter 备份管理 ——借助应用程序一致的数据备份管理，简化混合云操作

NetApp SnapCenter 简单、可扩展、赋权&#xff1a;跨 Data Fabric 的企业级数据保护和克隆管理 主要优势 • 利用与应用程序集成的工作流和预定义策略简化备份、恢复和克隆管理。 • 借助基于存储的数据管理功能提高性能和可用性&#xff0c;并缩短测试和开发用时。 • 提供基…...

编程日记 2023/3/1 13:46:31

Java内置队列和高性能队列Disruptor

一、队列简介 队列是一种特殊的线性表&#xff0c;遵循先入先出、后入后出&#xff08;FIFO&#xff09;的基本原则&#xff0c;一般来说&#xff0c;它只允许在表的前端进行删除操作&#xff0c;而在表的后端进行插入操作&#xff0c;但是java的某些队列运行在任何地方插入删…...

编程日记 2023/3/1 13:44:12

比特数据结构与算法（第四章_下）二叉树的遍历

本章将会详细讲解二叉树遍历的四种方式&#xff0c;分别为前序遍历、中序遍历、后续遍历和层序遍历。在学习遍历之前&#xff0c;会先带大家回顾一下二叉树的基本概念。学习二叉树的基本操作前&#xff0c;需要先创建一颗二叉树&#xff0c;然后才能学习其相关的基本操作&#…...

编程日记 2023/3/1 13:43:05

chatGPT是什么

2022年11月&#xff0c;人工智能公司OpenAI推出了一款聊天机器人&#xff1a;ChatGPT。它能够通过学习和理解人类语言来进行对话&#xff0c;还能与聊天对象进行有逻辑的互动。除了聊天&#xff0c;ChatGPT还能够根据聊天对象提出的要求&#xff0c;进行文字翻译、文案撰写、代…...

编程日记 2023/3/1 13:41:46

jenkins漏洞集合

目录 CVE-2015-8103 反序列化远程代码执行 CVE-2016-0788 Jenkins CI和LTS 远程代码执行漏洞 CVE-2016-0792 低权限用户命令执行 CVE-2016-9299 代码执行 CVE-2017-1000353 Jenkins-CI 远程代码执行 CVE-2018-1000110 用户枚举 CVE-2018-1000861 远程命令执行 CVE-2018…...

编程日记 2023/3/1 13:40:38

用canvas画一个炫酷的粒子动画倒计时

前言 &#x1f606; 这是一篇踩在活动尾声的文章&#xff0c;主要是之前在摸鱼社群里有人发了个粒子动画的特效视频&#xff0c;想着研究研究写一篇文章出来看看&#xff0c;结果这一下子就研究了半个多月。 &#x1f602; 下面就把研究成果通过文字的形式展现出来吧&#xf…...

编程日记 2023/3/1 13:39:27

关于网站建设的外文翻译/cms网站模板

Linux系统——入门简介 Linux&#xff0c;全称GNU/Linux&#xff0c;是一套免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹于1991年第一次释出&#xff0c;它主要受到Minix和Unix思想的启发&#xff0c;是一个基于POSIX和Unix的多用户、多任务…...

编程日记 2025/1/31 17:17:59

新能源网站建设/百度权重排名查询

断断续续的读《梦断代码》这本书竟然读了这些日子很是惭愧因为时间一长有些东西就会忘记&#xff0c;好在这本书是向读者灌输思想的一本书&#xff0c;不是一本小说&#xff0c;也不是一本记叙文章&#xff0c;不必从头再来只需要翻开往日的阅读笔记看看自己的收获就行了&#…...

编程日记 2025/1/31 16:08:57

品牌网站建设怎么做/账号seo是什么

2019独角兽企业重金招聘Python工程师标准>>> ASP和存储过程(Stored Procedures)的文章不少&#xff0c;不过我怀疑作者们是否真正实践过。我在初学时查阅过大量相关资料&#xff0c;发现其中提供的非常多方法实际操作起来并不是那么回事。对于简单的应用&#xff0c…...

编程日记 2025/1/31 16:03:36

南头企业网站建设公司/广州网络推广公司

javaScript中自定义滚动条二 完整代码&#xff1a;&#xff08;代码只是面向功能&#xff0c;后期有待优化&#xff0c;一写细节的完善&#xff09; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm…...

编程日记 2025/1/31 13:56:52

亳州做企业网站/市场营销方案范文

为什么80%的码农都做不了架构师&#xff1f;>>> 1. vector<int>* 就是声明一个指向vector<int>的指针vector<int>* pV new vector<int>();pV->push_back(1);vector<int>::iterator it pV->begin();cout << *it &l…...

编程日记 2025/1/31 13:27:30

虚拟机做局域网网站服务器/域名服务器ip查询网站

转载&#xff1a;勿在浮沙筑高台http://blog.csdn.net/luoshixian099/article/details/51908175零.相关概念关于图的几个概念定义&#xff1a;连通图&#xff1a;在无向图中&#xff0c;若任意两个顶点vivi与vjvj都有路径相通&#xff0c;则称该无向图为连通图。强连通图&#…...

编程日记 2025/1/31 6:06:05