关于css的font-size的单位rem、em、px的区别

最新推荐文章于 2022-06-08 11:59:37 发布
最新推荐文章于 2022-06-08 11:59:37 发布
阅读量2.4k 收藏 2
点赞数
分类专栏： css 文章标签： rem px em
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41445581/article/details/89922330
版权

px：相对长度，相对于显示屏分辨率而言
em：值不固定，会继承父级元素的字体大小

<div style="font-size:20px">
<p style="font-size:2em">你好</p>
</div>

这里的1em就是父元素的大小为20px，所以2em就是40px
rem：这个是相对于根节点html大小而定，如果根元素的字体大小为16px，那么1rem=16px，该单位只需改变根元素的值的大小就可以改变页面所有以rem为单位的值的大小

红色可可
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置，仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; letter - spacing : 1px; } / / output h1 { margin : 0 0 20px; font - size : 2rem; line-height : 1.2
CSS的font-size属性及其em值的使用
12-13
定义和用法font-size 属性可设置字体的尺寸。说明该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。可能的值 实例设置不同的 HTML 元素的尺寸： XML/HTML Code复制内容到剪贴板 h1 {font-size:250%;}    h2 {font-size:200%;}    p {font-size:100%}   关于em值的使用问题用ctrl键加鼠标滚轮将页面放大，会带来一个算是小小的BUG，就
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结： 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装即可，不需要另外进行配置，此插件是对px进行转换。 3.新建一个rem.js的
移动端适配：动态设置html元素的font-size（页面使用rem做单位）
winne雪
04-30 6149
一、前言： 首先我们要了解的知识点： 1.物理像素(physical pixel) 我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。 2.逻辑像素 是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 3.设备的像素比(device pixel ratio)简称DPR 它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备...
CSS3中的rem单位
一只前端萌新的日常
07-07 2792
rem是CSS3新引入的单位，它改良了往期版本中em单位使用不方便的缺点。（如果想了解em单位的更多信息，可以查看之前的文章：CSS中的em单位）一、em单位带来的问题我们知道，em的长度是根据元素自身的font-size大小来确定的：1em = 元素中文本的1个垂直高度如果元素自身没有设置font-size，那么em的长度将根据父元素的font-size来确定。另外，元素自身的font-size如
响应式网页：使用 rem 设置文字大小
axl---专心专注于web前端开发
08-07 501
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。 当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。 网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。 一、那...
font-size : Rem
bluesky
06-29 957
CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。 前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元...
html手机网站font-size:16em,px、em、rem
weixin_33773670的博客
06-19 751
px、em、rempx 是固定的长度单位em 是父元素的font-size(字体大小)的值，常用来设置首行缩进2em(2字符)rem 是根节点(html，body)的font-size(字体大小)的值，可以用来做移动端的自适应。为什么要适配移动端px像素(pixel)相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时p...
CSS font-size: em&rem
YuqiRealm.com
06-09 738
字体大小（font-size）单位：em是相对长度单位。它是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。例如：<body> <div id="result"> <p>font-size</p> </div> </body><style type="text/css"> div{
font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配
一个小白的成长历程
03-31 1963
面对不同设备的适配与响应；这里介绍不同的是@media规则进行匹配不同的设备； 不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单位 - rem； *其中“r“代表的是root的意思，在HTML网页中，root指的就是<html>元素
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 ...import 'lib-flexible' // ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小...
移动WEB开发之rem适配布局
qq_46199553的博客
09-10 607
方案 ？ 页面布局文字能否随着屏幕大小变化而变化？ 流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ 1. rem 基础 rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 rem的优势：父元素文字大小可能不一致， 但是整个
如何更愉快地使用rem —— 别说你懂CSS相对单位
weixin_33756418的博客
07-16 189
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若有勘误或翻译建议，欢迎 Github PR ^_^） 《别说你懂CSS相对单位》系列译文： 如何更...
css font size 单位,css中font-size的单位总结：px、em、pt
weixin_33655208的博客
08-03 2412
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小.比如这里的字是24px如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的.pt是印刷业上常使用的单位,磅的意思.一般也用于页面打印排版.以上三种PX是像素单位,EM...
CSS rem单位跟着设备html：font-size改变大小
06-08 352
CSS rem单位跟着设备html：font-size改变大小
CSS样式中字体大小，建议font-size使用em
小可的笔记本
10-02 666
在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。   浏览器的默认字体高都是16px，所以未经调整的...
前18大旋转修整器企业占据全球87%的市场份额.docx
最新发布
05-06
前18大旋转修整器企业占据全球87%的市场份额
postcss-pxtorem只让一个页面
08-25
要在一个页面中使用postcss-pxtorem插件将px单位转换为rem单位，首先需要安装postcss、postcss-loader和postcss-pxtorem插件。可以使用以下命令进行安装： ``` npm i postcss postcss-loader postcss-pxtorem -D ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值