前端值得一探究竟特辑 --- 字体大小单位px、em、rem、%

最新推荐文章于 2024-06-28 10:11:59 发布
最新推荐文章于 2024-06-28 10:11:59 发布
阅读量473 收藏
点赞数 1
分类专栏： CSS Front-End 前端值得一探究竟特辑 文章标签： rem em font-size
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WRian_Ban/article/details/100014637
版权

1、px

通常使用双数。任意浏览器的默认字体大小都是16px。

2、 em

相对于当前浏览器内文本的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em。
但是：em会继承父级元素的字体大小，导致1em在不同的父元素下，所刻画的物理长度不一定固定。因此引入rem。

3、 rem

rem是相对于根元素<html>，只需要在根元素确定一个参考值。

html {font-size: 62.5%;         // 10 ÷ 16px × 100% = 62.5% }
body {font-size: 1.4rem;       // 1.4 × 10px = 14px  }
h1 { font-size: 2.4rem;          // 2.4 × 10px = 24px }

4、 %

把 font-size 设置为基于父元素的一个百分比值。

那等雨停吧
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PostCSS通过px2rem插件和lib-flexible将px单位转换为rem(root em)单位实现大屏适配
彭世瑜的博客
11-04 988
因为lib-flexible.js 原本是用来适配移动端的，所以，需要改动一些代码才能适配PC大屏，只能通过整个文件引入，不要通过npm安装，否则每次安装都需要重新修改代码。需要注意的是，这个缩放是基于宽度缩放的，如果屏幕尺寸比例不一致，会导致竖向的内容会缺失，或者出现滚动。在尺寸为1200px的屏幕宽度下，可以还原为代码中设置的尺寸。在尺寸为1400px的屏幕宽度下，可以还原为代码中设置的尺寸。就不一样，进而导致页面元素的尺寸也不一样，实现了缩放效果。这样，在不同的屏幕下，计算出来的根元素。
前端学习（45）：字体大小粗细样式
歌谣的博客
12-08 966
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
前端学习中必须掌握的 字体单位
weixin_43748811的博客
11-29 6909
字体单位px ,em , rem 一、px（像素，相对于显示器屏幕分辨率而言） 二、em（相对当前元素内文本的字体尺寸，会继承父元素大小） 三、rem （相对HTML根元素，最常用的单位） PX 像素px是相对于显示器屏幕分辨率而言的。 PX特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，...
前端常用字体大小对照表
最新发布
xuedake的博客
06-28 160
【代码】前端常用字体大小对照表。
前端页面css字体单位大小像素
feel
09-07 608
一个页面字体的大小在不同的设备上效果会不同，怎样解决字体的大小适中成为一个很值得考虑的问题。解决这个问题多种做法多种方案，根据自己的需求自行选择合适你的：纯CSS方案： px 常用的字体大小的单位，px相信是大家经常用的； pt全称‘point’意思大致为 点，是一个专用的印刷单位“磅”，大小为1/72英寸 很少人使用； em：em是相对于body设置的字体大小，是一
前端开发之字体大小px，em，rem，pt
在坑中上爬，在打击中成长
07-29 6269
在前端开发中尤其是响应式的开发中，字体的大小变化在不同的屏幕尺寸下
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置，仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; ...
gulp-px2rem-plugin：将px转换成rem
02-03
用rem来做响应式开发的时候，将px转换成rem值的时候，是每一个程序员头大的事情。 起初，我使用sublime的cssrem插件，效果挺好，避免了我重复使用小学学习的除法技能。但是，我们能感知的长度大小，还是可以，全部...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
2. **em**: em是一个相对长度单位，它的大小取决于其父元素的字体大小。例如，如果父元素的字体大小为16px，1em等于16px。当需要根据父元素的大小进行动态调整时，em单位非常有用。然而，这种继承特性可能导致嵌套...
03-px-em-rem-vw-vh-区别.md
03-31
- **特点**：当元素的字体大小使用em单位时，1em等于当前字体大小。如果后代元素使用em单位，则会相对于其父元素的字体大小进行计算。 #### rem - **相对单位**：相对于根元素（html）的`font-size`的值。 - **用途...
零基础学习WEB前端开发(十七)：字体大小、字体粗细和字体样式
陶小桃Blog
11-05 7321
目 录 一、字体大小 1.1 基本语法 1.2 演示 1.3 注意点 二、字体粗细 2.1 语法 2.2 例子 2.3 注意点 三、字体样式 3.1 语法 3.2 实例演示 一、字体大小 1.1 基本语法 font-size 1.2 演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi...
前端修改字体大小，google限制字体最小
sinat_21050687的博客
11-21 2461
因开发项目，发现字体差不多大，特色不明显。故特意在网上搜索把字体变小的教程  .small-font{     　　　  font-size:12px;              -webkit-transform-origin-x: 0;  //重点             -webkit-transform: scale(0.90);//重点         }  
字体大小统一解决方案
luquinn的博客
05-06 425
在src的目录下找到assets文件里面的的css文件夹在里面创建公共的按钮样式+表格样式+树形菜单样式文件然后在这些文件中写上样式属性。第一步、在src的目录下找到assets文件里面的的css文件夹，创建全局的variable.scss文件，并在文件中声明css变量。说明：把公用样式分门别类写在不同的类型文件之后，在使用时，直接绑定class类名就可以嘞，极大的减少了组件或页面的代码行数。3.代表中号，4.代表大号，5.代表超大号。在已经挂载到全局的global.scss文件中引入创建好的。
【JavaWeb】前端开发三剑客之CSS(下)
冲击大厂之路!!!
01-22 3473
CSS的后序学习，CSS代码细节解读！
前端开发【CSS字体大小单位】
罗忠浩的博客
03-15 2133
在HTML/CSS中，字体大小的单位有很多，涉及到响应式布局时常用的px就显得很不好用，现在来谈谈常用的字体大小单位： 1.px：绝对单位，页面按精确像素展示（日常使用最多） 2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值，默认1em=16px。 3.rem：相对单位，可理解为”root
前端开发入门到实战：CSS中字体单位：px、em、rem和%
web前端开发学习教程
05-25 703
对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。 “网页”和“印刷”的单位 若要把单位做区隔，最简单可以分为“网页”和“印刷”两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向透过排版软件来进行...
前端必知：8.字体的设置
qq_52799985的博客
07-09 2346
这些是一些常用的CSS字体设置属性，可以帮助你自定义字体的外观和样式。你可以根据需求使用这些属性来创建所需的字体效果。当涉及到CSS字体设置时，有很多属性可以用来调整字体的外观和样式。
postcss-pxtorem字体大小
08-18
`postcss-pxtorem` 是一个用于将 CSS 中的 px 单位转换为 rem 单位的 PostCSS 插件。它可以帮助实现响应式布局和字体大小的适配。 要使用 `postcss-pxtorem` 将字体大小转换为 rem 单位，你需要按照以下步骤进行配置： 1. 安装 `postcss-pxtorem`：在项目中运行以下命令安装 `postcss-pxtorem`： ``` npm install postcss-pxtorem --save-dev ``` 2. 创建 PostCSS 配置文件：在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下内容： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 设置根元素的字体大小，通常为网页的基准字体大小 propList: ['font-size'], // 需要转换的属性列表，这里只包含字体大小 selectorBlackList: [], // 不需要转换的选择器列表 }, }, }; ``` 请根据你的具体需求调整 `rootValue` 的值，它表示根元素的字体大小，一般情况下为网页的基准字体大小，通常是 `16px`。 3. 使用 PostCSS：在构建过程中使用 PostCSS 处理 CSS 文件，并应用 `postcss-pxtorem` 插件。具体的配置方法取决于你使用的构建工具（如 webpack 或 gulp）。 例如，在 webpack 中配置 PostCSS 的方法如下： - 安装必要的 webpack loader： ``` npm install postcss-loader --save-dev ``` - 在 webpack 配置文件中添加 PostCSS loader： ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', ], }, ], }, // ... }; ``` 请确保在你的构建工具中正确配置了 PostCSS 插件。 这样，当你在 CSS 文件中使用 `font-size` 属性设置字体大小时，`postcss-pxtorem` 将会自动将其转换为 rem 单位。 请注意，`postcss-pxtorem` 的具体配置和使用方式可能会因个人需求和项目设置而有所不同。确保阅读并遵循 `postcss-pxtorem` 的文档和示例，以确保正确地配置和使用该插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值