CSS单位 em,rem,vw

最新推荐文章于 2023-12-06 23:18:17 发布
最新推荐文章于 2023-12-06 23:18:17 发布
阅读量6.4k 收藏
点赞数
分类专栏： CSS 移动端 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43240445/article/details/110197933
版权

移动端适配

1.em

1em等于其父元素的字号大小,相当于font-size的大小
app中的1em等于父元素root的字号大小,10em=200px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .root{
            font-size:20px;
        }
        .app{
            /*font-size:30px;*/
            width:10em;
            height:10em;
            background:skyblue;
        }
    </style>
</head>
<body>
    <div class="root">
        <div>
            <div class="app"></div>
        </div>

    </div>
</body>
</html>

2.rem

1rem是html根标签1个字号的大小,html中font-size的大小
这里的1个rem等于20px,10rem=200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            font-size:20px;
        }
        /*这里的1个rem等于20px,10rem=200px*/
        .root{
            width:10rem;
            height:10rem;
            background:green;
        }
        .app {
            width: 5rem;
            height: 5rem;
            background: skyblue;
        }
    </style>
</head>
<body>
<div class="root">
    <div class="app"></div>
</div>
</body>
</html>

em和rem的区别在于父元素和根元素!!!

3. vw / vh

是一个相对长度，相对于整个屏幕。
整个屏幕平均分为100等分，横向（x轴）分为100vw，纵向（y轴）分为100vh 和百分比类似
所以：50vw 就是整个屏幕宽度的一半

1vw = 当前屏幕宽度的1%
在750px屏幕下：

1vm = 7.5px;
100vw = 750px;
1px = 1vw/7.5px = 0.1333333vw;
60px = 60px * 0.1333333vw = 8vw

案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .root{
            width: 100vw;
            height: 40vw;
            background:skyblue;
            margin:4vw auto;
        }
    </style>
</head>
<body>
<div class="root"></div>
</body>
</html>

在375px屏幕下

0.5px = 0.133333vw

3.浏览器识别的最小字号

浏览器识别的最小字号：在2020之前浏览器能识别的最小字号是12px，如今浏览器能识别的最小字号是1px
_不是惊风
关注
专栏目录
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
1. **vw单位**： - `vw` 即 "view width" 的缩写，表示相对于视口宽度的单位。1vw等于屏幕宽度的1%，因此，如果设备屏幕宽度为375px（如iPhone 6/7/8），1vw等于3.75px。开发者可以利用vw单位为元素动态设置宽度，...
CSS3中单位（em、rem、vw、vh）
weixin_45847162的博客
05-05 217
一、em和rem em 和 rem都是灵活、 可扩展的相对长度单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 1.em em是相对于当前对象内文本的字体尺寸，而不是受父元素字体尺寸影响，em父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。如果没有设置字体尺寸就会默认是16px。 <!DOCTYPE html> <html lang="en"...
CSS布局单位之em、rem、vw和vh
wdhxs的博客
11-11 369
CSS布局单位 文章目录CSS布局单位一、em与rememrem二、使用步骤1.引入库2.读入数据总结 一、em与rem em em与rem不同于px，都是相对长度单位。 em的参考对象是父元素的font-size，其中浏览器默认的font-size是16px。当前元素设置了font-size时，则以当前元素的font-size为参考对象。 .father { /* em是相对父元素来说的 */ /* 父元素没有定义font-size则参考自己的font-size */ font-size: 10
em,rem,vw,vh之间的区别
weixin_46953330的博客
03-16 2193
em em是相对长度单位，它是基于父元素的字体大小。 当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。 rem rem也是相对单位，但它相对的只是HTML根元素font-size的值。 vw，vh vw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。 在pc端中，指的是浏览器的可视区域。 在移动
css——vh、vm、px、rem
weixin_43551242的博客
01-03 511
css3的视口单位vh、vw可实现自适应： vh、vw是视口单位(就是根据浏览器窗口的大小单位，不收显示器分辨率的影响)，可以根据窗口的大小来自动调节字体大小，做的响应式页面、但对于不同浏览器的兼容性要求较高 px是对应我们电脑和其他显示器的分辨率，这样就会出现问题，使用px单位需要注意根据不同电脑的分辨率来做自适应会有点麻烦的 em是相对于长度单位，相对于当前对象内文本的字体尺寸，没有设置是默认浏览器是1em=16px。如果使用em做自适应可以把body的 font-size：62.5%，16px*6
Css单位rem与vm
最新发布
weixin_61485030的博客
12-06 530
rem是css3新增的一个相对单位，rem是根据html标签中font-size来确定1rem的大小。
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
01-21
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-...
CSS3 移动端em与rem区别
分享我的点点滴滴，在成长路上与你同行！
04-03 506
rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。 rem是根据html根节点来计算的，而em是继承父元素的字体。 <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
张木期的博客
07-29 5471
1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体...
CSS样式中字体大小，建议font-size使用em
小可的笔记本
10-02 702
在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。   浏览器的默认字体高都是16px，所以未经调整的...
Css单位px，rem，em，vw，vh的区别
aoxi9939的博客
03-12 280
px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size） 如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸 特点： 　　1. em的值并不是固定的； 　　2. em会继承父级元素的字体大小 rem ...
1px、1em、1rem、1vh / 1vw 的含义
m0_37557930的博客
04-28 6598
1、1px px像素（Pixel），相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的，一般电脑的分辨率有{1920*1024}等不同的分辨率，1920*1024 前者是屏幕宽度总共有1920个像素，后者则是高度为1024个像素。 2、1em em 就是相对于自身字体 fontSize 的大小，如果自身指定fontSize = 20px，父元素 fontSize = 30px，那么 1em = 20px；如果自身没有指定，则是继承来自于父元素的 fontSize，1em = 30px。 3、.
css简易的进度条
qq_45723045的博客
10-22 856
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
CSS的px、em、rem、%、vw、vh、vm 单位区别
思维小刀
04-30 1993
https://blog.csdn.net/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
CSS度量单位rem、em、vw、vh详解
热门推荐
慕白博客
07-22 1万+
CSS度量单位rem、em、vw、vh详解 单位 说明 兼容性 em 相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化 良好 rem 相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+ vw 相对于视口的宽度...
移动端单位和单位转换
m0_73903826的博客
02-14 136
移动端单位和单位转换
CSS字体尺寸设置解析：px, pt, %, em, rem, vw
而rem单位（root em）则与em相似，但它是相对于根元素（通常是`<html>`）的字体大小，而不是直接父元素。 文章中通过例子展示了当`<html>`的`font-size`设置为200%时，所有使用相对单位（如em或%）的子元素的字体...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值