CSS3的REM设置字体大小

最新推荐文章于 2024-04-13 19:57:22 发布
最新推荐文章于 2024-04-13 19:57:22 发布
阅读量128 收藏
点赞数
原文链接：http://www.cnblogs.com/huanghuali/p/6931080.html
版权

1.使用rem来设置Web页面的字体大小；

2.rem是相对于根元素<html>；

3.rem能等比例适配所有屏幕

4.在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有
设置，将是以“16px”为基准 ）；

 

我们来看一个简单的代码实例：

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

上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。

举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

 

浏览器的兼容性:

rem是CSS3新引进来的一个度量单位;

支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和
Opera11+。

只是可怜的IE6-8无法兼容。

 

移动端字体单位font-size选择px还是rem

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

 

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

 rem的介绍很不足，补充如下：
1、IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem；
2、IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem。

 

一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 

 

        选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具

地址：http://pxtoem.com/

 

 

 

原链接：https://www.w3cplus.com/css3/define-font-size-with-css3-rem

http://www.tuicool.com/articles/IzuEzuq

 

http://www.qdfuns.com/notes/19478/6ccc9300876e9347dcbd8ae40e64a939.html

转载于:https://www.cnblogs.com/huanghuali/p/6931080.html

diebaiying3731
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
响应式网页：使用 rem 设置文字大小
axl---专心专注于web前端开发
08-07 522
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。 当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。 网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。 一、那...
rem用来设置字体大小
LIANGXIAOYAN7002的专栏
12-29 1552
rem用来设置字体大小，也可以用于网格布局。rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下，根元素就是html了。这个单位可以解决em设置字体时，由于继承带来的问题，具体如下： body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
通过rem响应式设置字体大小
qq_17355709的博客
04-02 1267
应用场景:父节点html的基础font-size设置为100px,iphone5的屏幕宽度基础文字大小设置为font-size: 0.12rem，等于12px，然后随着其他类型的手机屏幕宽度的变大而动态调整页面上的基础文字大小. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
动端自适应rem的设置-- 关于字体大小
Mc123455的博客
03-31 494
pc端浏览器一般默认16px 如果是iPhone5的尺寸，那么根元素字体大小就是32px； 如果是IPhone6的尺寸，那么根元素字体大小就是37.5px； 在vscode 编辑器中，想输入 px 主动转换对应rem，需要改变默认字体大小 重启 vscode 即可 否则 默认16px 直接转换是 178 X 16 = 11.125rem 到浏览器查看是 高是417.188px...
vue中使用rem实现动态改变字体大小
m0_73481765的博客
10-16 2163
请注意，在Vue项目中，如果你使用了UI框架（如Element UI、Vant等），它们可能已经提供了自动适应字体大小的功能，你可以直接使用它们提供的方法。首先，在CSS文件中定义根元素的字体大小为一个基准值，比如16px（或者其他适合你的基准值）。首先，在CSS中定义根元素的字体大小为一个基准值，比如16px（或者其他适合你的基准值）。在上述代码中，我们使用了Vue的计算属性来动态计算其他元素的字体大小。状态，计算属性会自动重新计算相关元素的字体大小，并应用到对应的样式中。获取当前的字体大小，并将其与。
详解CSS3 rem(设置字体大小) 教程
09-24
在Web开发中，CSS3引入了许多新的特性，其中之一就是相对单位`rem`，用于设置字体大小。`rem`全称为"root em"，它与传统的`em`单位类似，都是基于相对大小，但`rem`的特殊之处在于它的参照对象是文档的根元素，通常...
轻松掌握CSS3中的字体大小单位rem的使用方法
09-24
CSS3中引入了一个新的字体大小单位叫做rem（root em），它是相对于根元素（通常是html元素）的字体大小来设置字体大小的单位。这种字体单位的出现是为了解决传统字体单位（如px和em）在使用上的一些不足。 首先，px...
css教程之css设置字体颜色
09-25
其他单位如百分比、em、rem、pt等也可用于设置字体大小。 3. **字体样式**： - `font-family`属性用于定义字体。在示例中，`font-family:Arial, '汉仪行楷简'`优先使用Arial字体，若用户系统未安装Arial，则使用'...
CSS中的字体大小设置属性总结
09-24
本篇文章将重点讨论三种常用的字体大小单位：像素(px)、相对单位(em)以及CSS3引入的根字体单位(rem)。 1. **像素(Pixel, px)**：像素是最直观且精确的单位，它表示屏幕上的一个物理点。使用像素设置字体大小能确保...
修改rem根元素默认字体大小
weixin_60932546的博客
08-21 303
把默认16px大小更改为自己想要的默认HTML字体大小。，在设置搜索中直接输入。
移动端适配
weixin_30865427的博客
01-02 439
作为一个前端开发人员，我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前。而现在的设备大小尺寸不一，近年来智能手机的普及更是让网页的用户大部分来源与手机，所以让不同大小的移动端屏幕都能较好的还原设计稿就成了一个前端开发者需要解决的当务之急。我查阅了大量资料和进行了一些实践，下面是我对移动端适配的一些认识。 首先我们来谈谈我们在电脑端用的字体单位px和em 在国内的网站中大多都是使用px...
设置字体大小px、em和rem区别
Y_东东的博客
09-21 1684
PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 4.px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em特点 1.em的值并不是固定的； 2....
用rem设置文字大小
aitaozhuo9068的博客
07-25 128
一、px与em 用px设置文字大小是再正常不过的事情，比如 html {font-size: 12px;} 随处可见的在设置width、height使用px，这也是细致稳妥的设置方法，这样做的缺点在于调整浏览器的文字大小并未影响以px为单位的文本，这对一部分用户造成了不便。 用em设置文字大小弥补了这个问题，em是一个相对单位。文字大小用em表示的情况下，可以随着浏览器字...
了解和使用CSS中的rem单位，web前端开发资料
2401_84091993的博客
04-05 1022
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！.jpg" />
CSS中使用rem
qq_44773992的博客
10-10 184
rem是一种相对于根元素（元素）字体大小的单位，作用是为了更方便的进行响应式设计，使页面中的元素能够随着浏览器窗口大小的改变而自适应的调整大小。单位为rem的尺寸只会受到根元素字体大小的影响。根元素字体大小 = 1rem。
了解和使用CSS中的rem单位
最新发布
2401_84091468的博客
04-13 730
将模块保留在rem单位中，将元素保留在模块中，将它们保留为em。这种方法使操作全局大小变得更容易，它可以缩放模块中的类型，而模块内容是根据模块字体大小本身来缩放的。当时，较旧版本的IE仍占有较大的市场份额，因此无法缩放带有像素大小的文本。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！但是，关于rem和em单位用作媒体查询单位时，有一个有趣的细节：它们始终保持相同的值1rem = 1em =浏览器设置的字体大小。
CSS3自适应字体大小
丑小鸭变黑天鹅的博客
11-24 2007
CSS3自适应字体大小一、viewpoint二、 其他方案 一、viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 1
使用rem，使字体大小自适应屏幕
jojo1001的博客
11-16 3978
rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em区别在于使用rem为元素设 定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 将以下代码放在入口文件，即可使字体大小自适应屏幕大小 function resize() { let doc = document.documentElement //返回文档的根节点 let w
移动WEB开发之-REM（rem）布局
m0_60237095的博客
03-21 3713
目录 移动WEB开发之REM布局 rem基础 rem单位 媒体查询 什么是媒体查询 媒体查询语法规范 1.mediatype 查询类型 2.关键字 3.媒体特性 4.媒体查询书写规则 less 基础 维护css弊端 Less 介绍 Less 嵌套 Less 运算 rem适配⽅案 rem实际开发适配⽅案 总结： 苏宁⾸⻚ 1、 技术选型 2、搭建⽂件结构 3、设置视⼝标签以及引⼊初始化样式 4、设置公共common.less⽂件 移动WEB开发之REM布局
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、付费专栏及课程。

余额充值