rem em vw vh

最新推荐文章于 2025-03-29 17:33:16 发布
原创 最新推荐文章于 2025-03-29 17:33:16 发布 · 200 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用rem单位进行响应式布局的方法，该方法通过设置根元素html的字体大小为屏幕宽度的百分之一来实现不同屏幕尺寸下的适配。同时讨论了如何利用em单位和vw/vh单位来调整父级元素的尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

rem适配方案 ：淘宝布局  ==根元素  html的字体大小

em  父级元素

vw 屏幕的宽度的百分之一

vh 屏幕的高度的百分之一

移动端的rem布局和VM布局
myazwj的博客
11-27 643
前言： 在开发中我们会遇到ui给我们一套750px 的设计稿，但是我们使用vant组件库开发的话，里面的都是写好了的，它里面的是375px 我们要做的是怎么把给的需求完成： 1.使用使用rem适配 1安装 amfe-flexible插件 yarn add amfe-flexible npm i amfe-flexible 在main.js导入 import "amfe-flexible" 安装postcss-pxtorem .
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
最新发布
全栈老李的博客
05-14 1041
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
rem vm 自适应屏幕大小布局
RenBaiLi的博客
09-05 679
一丶 rem 适配方案： Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具: postcss-pxtorem是一款postcss插件，用于将单位转化为rem lib-flexible用于设置rem基准值 安装并引入插件: 1.安装依赖 cnpm install lib-flexible postcss-pxtorem --save-dev 2. main.js 导入 1.创建.postcssrc.js module.exports...
两种移动适配方案——rem、vmvh
m0_67391401的博客
03-17 1043
移动适配 1. rem 媒体查询 flexiable.js 适配 2. vm/vh 移动适配指的是在屏幕宽度不同时，网页元素尺寸不同（等比缩放） 1. rem rem单位是相对单位，是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 例如在HTML字号大小为20px时，box盒子的宽度为5_20=100px，高度为3_20=60px /* 1rem = 1html标签字号大小 */ html { font-size: 20px; } .box {
浅谈rem布局和vm布局
weixin_30699463的博客
07-16 590
基础概念 屏幕尺寸 屏幕对角线的长度（cm） 屏幕像素密度 屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。 屏幕分辨率 横纵向上物理像素的个数（物理像素） 物理像素（physical pixel）或设备像素（device pixel） 物理像素又被称为设备像素，它是显示设备中一个最微小的物理部件。每个像素可以根据...
移动端适配 后篇（rem+vm）
weixin_30621919的博客
03-28 279
涉及到的一些名词，详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 【英寸Inch】英寸表示屏幕斜对角线的长度 【像素Pixel】像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的 【分辨率】分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334. 分辨率又分为【物理分辨率】和【逻辑分辨率】，...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应
m0_51244077的博客
01-09 1607
前端中常用的单位度量+图片自适应
前端css高频面试题——em/px/rem/vw/vh的区别？
weixin_47450807的博客
04-06 558
一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大 小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对 长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之 所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺 寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需
前端基础面试题：rem em vw vw 百分比区别？
sdasadasds的博客
07-28 563
注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...
px、em、rem、%、vw、vh、vm 这些单位的区别
weixin_34255793的博客
05-22 637
1.px px就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 2.em em参考物是父元素的font-size，默认字体大小是16px，所以1em不是固定值，因为它会继承父元素的字体大小 3.rem rem参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可，相对于em使用...
移动端前端的适配和rem,vm其他的一些的复习
动感超人的博客
05-24 974
屏幕分辨率 注意: 屏幕分辨率是一个固定的值,屏幕生产出来就确定了,无法修改! 我们在电脑所设置的,都是显示分辨率! 显示分辨率和屏幕分辨率是二个概念! 屏幕密度 每英寸里包含的物理像素点的个数,单位是PPI(pixels per inch),还有另外一个是dpi(dots per inch) ,dpi是衡量打印机的,ppi是衡量屏幕的 计算公式: 像素相关 物理像素 又称：设备像素，物理像素是一个长度单位，单位是px，1个物理像素就是屏幕上的一个物理成像点，就是屏幕中一个微小的发光物理元器件（可
rem+vm 适配移动端
thankszmy的博客
12-28 1180
html {   height: 100%;   font-size: 50px; // 向下兼容 不止vw时候 写死font-size   font-size: 13.33333333vw; // 7.5rem === 100vw   margin: 0 auto; } @media (min-width: 560px) { // pc兼容   html,body {     font-si...
rem rpx vm,hv,百分比之间的区别
weixin_45441470的博客
11-21 792
在选择使用这些单位时，需要根据具体的项目需求和使用场景来决定。这些单位提供了不同的灵活性和适应性，可以根据设计要求和目标平台选择合适的单位。、百分比都是用于处理布局和尺寸的单位，它们在使用场景和基准值上有所不同。
CSS的px、em、rem、%、vw、vh、vm 单位区别
思维小刀
04-30 2078
https://blog.youkuaiyun.com/weixin_34255793/article/details/91473281?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlo
rem,em,vw,vh,vm的区别
Joyce的博客
04-17 1434
rem、em、vw、vh、vm都是相对单位，相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。它们之间的区别是什么呢？
CSS中的em,rem,vm,vh详解
2202_75961842的博客
03-29 1224
单位 | 解释 | 基础参考 | 用途 || `em` | 相对单位 | 父元素的字体大小 | 适用于需要根据父元素动态调整的场景。| `rem` | 相对单位 | 根元素（`<html>`）的字体大小 | 适用于确保一致的布局和尺寸，避免父元素影响。| 单位 | 解释 | 用途 || `vh` | 相对于视口高度的单位，1vh = 视口高度的 1% | 用于根据视口的高度设置元素的高度或其他尺寸。
网页字体单位px、em、%、rem、pt、vm、vh介绍
热门推荐
ffeeng的博客
06-14 3万+
本文主要介绍在编写网页中可能会用到的字体单位 网页中定义字体时可能会用到的字体单位：px、em、%、rem、pt、vm、vh 等。 1. 字体单位 1.1 px px是pixel缩写，是基于像素的单位（屏幕上显示数据的最基本的点）。用像素定义的的文字、图片等会随屏幕的分辨率变化而变化。如果在定义字体大小时，使用px作为单位，分辨率调高，实际看到的文字就变“小”。 1.2 em em...
px、em、rem、vm、vh、vw的区别
weixin_44082369的博客
08-21 2190
px、em、rem、vm、vh、vw（除px都是百分比计算） em：根据其父元素的font-size来计算，默认1em=16px rem: 和em相同，只是rem是相对于根元素。如body font-size=10px/62.5%; vm: 根据可视区宽度和高度最小的计算，1vm=1%可视区大小 vw: 是vm的具体，指可视区宽度 vh：可视区高度 ...
移动端适配方案详解：rem与vw/vh的应用与实践
在本文件中，我们主要关注的是使用`create-react-app`创建的前端项目如何进行移动端适配，以及px转换为rem和vw/vh的技术实现。 首先，`create-react-app`是一个由Facebook官方提供的React项目的脚手架工具，它可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值