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

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

news 2026/3/27 13:42:21

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

为什么90%的Python项目误用SM9？——基于NIST SP 800-56A rev3与GB/T 38635.2的合规性性能审计清单

第一章&#xff1a;SM9密码算法的合规性认知误区与审计必要性在国产密码应用推广过程中&#xff0c;SM9标识密码体系常被误认为“天然合规”——仅因列入《GB/T 38635.1—2020 信息安全技术 SM9标识密码算法 第1部分&#xff1a;总则》即等同于满足等保2.0、密评及《商用密码管…...

编程新知 2026/3/27 13:39:12

别再只用交叉熵了！深入对比YOLOv8中Focal Loss与CIoU Loss的改进效果与适用场景

深入解析YOLOv8损失函数优化&#xff1a;Focal Loss与CIoU Loss的实战对比与场景适配 当你在深夜调试YOLOv8模型时&#xff0c;是否遇到过这样的困境&#xff1a;明明增加了训练数据&#xff0c;小目标检测的准确率却始终上不去&#xff1f;或是发现模型对密集排列的物体总是漏…...

编程新知 2026/3/27 13:31:09

Hunyuan-MT-7B应用案例：国际展会AI同传助手系统后端架构设计

Hunyuan-MT-7B应用案例&#xff1a;国际展会AI同传助手系统后端架构设计 1. 项目背景与需求分析 国际展会现场的同声传译一直是技术难题。传统人工翻译成本高昂&#xff0c;且难以覆盖所有语言组合。随着多语言大模型的发展&#xff0c;AI同传系统成为可行的解决方案。 Huny…...

编程新知 2026/3/27 12:28:47

实战指南：基于快马平台快速开发树莓派远程视频监控系统

最近在折腾树莓派&#xff0c;想做个简单的远程监控系统。之前总卡在环境配置和代码调试上&#xff0c;后来发现用InsCode(快马)平台可以快速生成可运行的项目骨架&#xff0c;省去了不少麻烦。这里分享下我的实现过程&#xff1a; 硬件准备 树莓派4B搭配官方摄像头模块是最基础…...

编程新知 2026/3/27 12:20:28

Ling-1T万亿参数模型：高效推理新体验

Ling-1T万亿参数模型&#xff1a;高效推理新体验 【免费下载链接】Ling-1T-FP8 项目地址: https://ai.gitcode.com/hf_mirrors/inclusionAI/Ling-1T-FP8 导语&#xff1a;近日&#xff0c;inclusionAI团队正式发布了Ling系列2.0版本的旗舰模型——Ling-1T-FP8&#xff…...

编程新知 2026/3/27 12:06:21

Simulink频域分析避坑指南：如何准确获取谐振频率（含MATLAB代码）

Simulink频域分析实战&#xff1a;谐振频率精准提取方法论与MATLAB实现 在控制系统设计与分析领域&#xff0c;频域特性是评估系统动态性能的核心指标之一。而谐振频率作为频域响应中的关键特征点&#xff0c;直接影响着系统的稳定性和响应速度。然而&#xff0c;许多工程师在使…...

编程新知 2026/3/27 12:02:20

告别龟速下载：用阿里云镜像源5分钟搞定CentOS 8 Stream + 宝塔面板环境

极速部署CentOS 8 Stream与宝塔面板&#xff1a;阿里云镜像实战指南 每次在服务器上配置环境时&#xff0c;最让人抓狂的就是漫长的等待时间。特别是当需要从国外官方源下载安装包时&#xff0c;那个进度条简直像蜗牛爬行。我曾经花了整整一个下午只为安装基础环境&#xff0c;…...

编程新知 2026/3/27 11:52:16

3步实现手游PC级操控：QtScrcpy键鼠映射技术全解析

3步实现手游PC级操控&#xff1a;QtScrcpy键鼠映射技术全解析 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy …...

编程新知 2026/3/27 11:13:57

STP根桥选举避坑指南：华为交换机优先级设置的那些门道

STP根桥选举避坑指南&#xff1a;华为交换机优先级设置的那些门道 在网络工程师的日常工作中&#xff0c;生成树协议&#xff08;STP&#xff09;的配置看似简单&#xff0c;却暗藏玄机。特别是根桥选举这个基础环节&#xff0c;稍有不慎就会导致网络性能下降甚至环路问题。本文…...

编程新知 2026/3/27 10:29:45

tmux快速上手指南：3个核心命令与1个关键快捷键解析

1. 为什么你需要tmux&#xff1f; 如果你经常在服务器上工作&#xff0c;肯定遇到过这样的场景&#xff1a;正在跑一个耗时很长的任务&#xff0c;突然网络波动导致SSH连接断开&#xff0c;所有进程都被终止&#xff0c;几个小时的成果瞬间消失。这种时候&#xff0c;tmux就是你…...

编程新知 2026/3/27 10:05:27