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

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

news 2026/3/27 12:23:46

一、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

TuShare实战（二）高效构建多股数据面板

1. 为什么需要多股数据面板 做量化投资的朋友都知道&#xff0c;数据准备是最基础也最耗时的环节。想象一下&#xff0c;你正在研究一个投资策略&#xff0c;需要同时分析5只股票的历史走势。如果每次都要单独获取、整理每只股票的数据&#xff0c;那效率实在太低了。这就是为什…...

编程新知 2026/3/27 11:48:09

QQ音乐下载的歌曲怎么导出来？分享我的FFMpeg自动化处理脚本（附Win/Mac命令）

用FFMpeg实现QQ音乐文件自动化处理&#xff1a;跨平台脚本全解析 每次从QQ音乐下载的歌曲文件总是带着各种限制——加密格式只能在特定播放器打开&#xff0c;专辑封面无法显示&#xff0c;批量处理更是让人头疼。作为一个整理过上千首音乐文件的资深用户&#xff0c;我摸索出…...

编程新知 2026/3/27 11:05:53

基于vue+springboot框架的同城宠物照看数据可视化分析系统的设计与实现

目录技术选型与框架搭建核心功能模块设计开发阶段划分关键代码示例&#xff08;简化版&#xff09;测试与部署项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与框架搭建 前端&#xff1a;Vue 3 TypeScript ECharts …...

编程新知 2026/3/27 10:57:51

OpenClaw备份策略：GLM-4.7-Flash模型与技能容灾方案

OpenClaw备份策略&#xff1a;GLM-4.7-Flash模型与技能容灾方案 1. 为什么需要备份OpenClaw环境 去年冬天的一个深夜&#xff0c;我的MacBook突然遭遇硬盘故障。当时OpenClaw正在执行一个长达3小时的自动化数据处理任务&#xff0c;所有中间状态和配置瞬间消失。这次事故让我…...

编程新知 2026/3/27 10:51:50

仅剩最后23套田间网关固件兼容包！Python农业物联网部署必备的8个设备驱动补丁（含Raspberry Pi 5专用版）

第一章&#xff1a;田间网关固件兼容包的农业物联网部署意义 在农业物联网&#xff08;Agri-IoT&#xff09;规模化落地过程中&#xff0c;田间网关作为边缘侧核心枢纽&#xff0c;承担着多源异构传感器数据汇聚、协议转换、本地决策与上云协同等关键职能。然而&#xff0c;我国…...

编程新知 2026/3/27 9:20:54

精读《Harness design for long-running application development》：真正拉开差距的，不是模型本身，而是你怎么给它harness

精读《Harness design for long-running application development》&#xff1a;真正拉开差距的&#xff0c;不是模型本身&#xff0c;而是你怎么给它搭脚手架 原文&#xff1a;Harness design for long-running application development Anthropic 这篇文章最值得读的地方&a…...

编程新知 2026/3/27 7:50:16

OpenClaw定时任务管理：ollama-QwQ-32B实现智能提醒系统

OpenClaw定时任务管理&#xff1a;ollama-QwQ-32B实现智能提醒系统 1. 为什么需要智能提醒系统 作为一个长期被各种截止日期折磨的技术从业者&#xff0c;我一直在寻找一个能够真正理解我需求的提醒工具。传统的日历应用虽然能设置固定时间的提醒&#xff0c;但缺乏灵活性——…...

编程新知 2026/3/27 7:40:14

OpenClaw调试技巧：nanobot镜像的日志分析与问题定位

OpenClaw调试技巧&#xff1a;nanobot镜像的日志分析与问题定位 1. 为什么需要关注OpenClaw日志 上周我在本地部署nanobot镜像时遇到一个诡异现象&#xff1a;OpenClaw能正常接收飞书消息&#xff0c;但执行自动化任务时总在"思考阶段"卡住。这个问题困扰了我两天&…...

编程新知 2026/3/27 7:01:26

5步快速解锁付费内容：bypass-paywalls-chrome-clean终极指南 [特殊字符]

5步快速解锁付费内容&#xff1a;bypass-paywalls-chrome-clean终极指南 &#x1f680; 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的时代&#xff0c;你是否经常遇到优…...

编程新知 2026/3/27 6:05:01

League-Toolkit：提升英雄联盟游戏体验的开源工具集

League-Toolkit&#xff1a;提升英雄联盟游戏体验的开源工具集 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是基…...

编程新知 2026/3/27 5:08:43