文档章节

rem px em的区别是什么?

突然很想飞
 突然很想飞
发布于 2015/11/26 17:12
字数 401
阅读 416
收藏 0
点赞 0
评论 0

一、什么是px?

   px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨路而言的。

   但是IE浏览器无法调整哪些使用px作为单位的字体大小;


二、什么是em?

    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体没有设置,那么其大小为相对于浏览器的默认字体尺寸。

    1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

    浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

    可以使用下面这个公式将像素转换为 em:pixels/16=em

     em的特点是:

     a.em的值并不是固定的;

     b.em会继承父级元素的字体大小。


三、到底什么是rem?

  【rem】是指根元素(root element,html)的字体的大小,其也是相对单位大小。

   rem与em的区别在于,使用rem元素设定字体大小时,仍然是相对大小,但其相对的只是html根元素的大小。


四、如何使用rem ?

    将浏览器的基准字号设置为62.5%, 也就10px; 现在1rem = 10px; 为了计算方便,然后在body上应用font-size:1.6rem,将字号设置为16px;

    

html{
    font-size:62.5%;
}
body{
    font-size:1.6rem;
}


© 著作权归作者所有

共有 人打赏支持
突然很想飞
粉丝 0
博文 4
码字总数 1595
作品 0
南京
彻底弄懂css中单位px和em,rem的区别

rem:rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。 因此,rem是一个相...

hhj187 ⋅ 2016/08/24 ⋅ 0

css3 px、em和rem

1、先观察关系的转换(http://pxtoem.com/) em优缺点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 所以我们在写CSS的时候,需要注意两点: 1. body选择器中声明Font-size=62....

zwjjap ⋅ 2015/10/08 ⋅ 0

说说css中pt、px、em、rem都扮演了什么角色

前段时间,终于仔仔细细的把pt、px、em、rem了解了一遍,简单整理了一下做个记录。 pt、px、em、rem都是什么 pt单位名称为点(Point),绝对长度单位。现在网页中出现得很少甚至不出现,常用...

郑乔尹在旅游 ⋅ 2017/11/23 ⋅ 0

px,em,rem,vw单位在网页和移动端的应用

px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度、比例有可能会不同...

刘元兴 ⋅ 2017/05/18 ⋅ 0

HTML&CSS基础学习笔记1.29-像素和相对长度

像素和相对长度 前面的html博文,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。 长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实...

MayaTeacher ⋅ 2016/09/15 ⋅ 0

【干货】前端rem单位的正确使用姿势

简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。 先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可...

wecloudnet ⋅ 2016/05/05 ⋅ 0

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs....

姚欣炜 ⋅ 2014/09/28 ⋅ 0

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs....

张涛泽 ⋅ 2017/04/19 ⋅ 0

讲解css单位px、em、rem的含义

一、首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现 px是相对于显示器分辨而言的 如果全篇用px布局会暗藏一个蛋疼的问题,就是...

浮躁的码农 ⋅ 2016/02/24 ⋅ 0

简单理解rem的用法

一、那么如果你确定要使用rem单位,就按以下三个步骤来计算: 1、确定基数:一般10px,自己记住就行,不用写进代码里 2、html {font-size:百分数;} 百分数=基数/16 基数10 百分数62.5% 基数1...

JSON_P ⋅ 2016/12/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部