px : Pixel像素单位。像素是相对显示器分辨率而言。
em : 相对长度单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px)。
rem : 相对单位,可理解为 "root em" ,相对于根节点html的字体大小来计算,css3新加属性。如果没有重置,html默认font-size:16px。
也就是说,em是以自身父容器为参考对象的,而rem直接以HTML为参考对象的,所以rem更适合移动式开发。 em :
em是一个相对长度单位,是相当于当前对象内文本的字体尺寸,如果我们未设置当前文本的字体尺寸,那么em就会相当于浏览器的默认字体尺寸。
在浏览器中默认字体尺寸为16px,换句话说1em = 16px
rem : 除了rem是相对于根节点html,其他和em一样。 rem适配移动端原理:
var offWidth = window.screen.width / 25;
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';
这样一来,25rem 等于 移动设备的最大宽度

css 单位之px , em , rem的更多相关文章

  1. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  3. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  4. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  5. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  6. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  7. 关于px em rem的一点小总结

    2015-11-28 06:06:40 概念 都是CSS单位. px:像素 Pixel.像素 (计算机屏幕上的一个点) em:1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如,如果 ...

  8. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. px em rem区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

随机推荐

  1. 安装Gitlab到Ubuntu(APT)

    运行环境 系统版本:Ubuntu 16.04.6 LTS 软件版本:Gitlab-ce-11.10.1 硬件要求:最低2核4GB,建议4核8GB 安装过程 1.安装依赖 root@localhost: ...

  2. 论文阅读笔记(十四)【AAAI2020】:Appearance and Motion Enhancement for Video-based Person Re-identification

    Introduction 本文的贡献:提出了基于视频的行人重识别模型:Appearance and Motion Enhancement Model(AMEM).该模型对两类信息进行提取:提出了App ...

  3. Postman使用技巧

    Postman是什么 Postman是chrome的一款插件,用于做接口请求测试,无论是前端,后台还是测试人员,都可以用postman来测试接口,用起来非常方便. Postman安装 官网下载(翻墙) ...

  4. 0013 基于DRF框架开发(01 基类视图 APIView)

    之前学习了模型序列化和普通序列化,我们用最简单的视图和url实现了对序列化的操作. 而实际上,象之前那种由DRF自动生成所有的视图和url的情况,在应用是使用很少.而需要用户根据实际业务需求,自定义视 ...

  5. ovs安装教程

    原文链接:https://www.cnblogs.com/goldsunshine/p/10331606.html Open vSwitch系列之二 安装指定版本ovs   Open vSwitch系 ...

  6. matlab HW求法笔记

    for i=1:9400 Sbox_out_11(i) = length(findstr(num2str(dec2bin(Sbox_out_1(i,:))),'1')); end

  7. thinkphp3.2短信群发项目实例

    项目功能是企业给客户群发短信,我就写这么多,也不知道你能不能运行成功,如果有问题可以在QQ上问我:605114821 项目文件SMS_V2.zip下载地址,百度云:http://yun.baidu.c ...

  8. C#扩展枚举的别名

    C#扩展枚举的别名 用途: 提高代码的可读性. 打印到日志系统,方便于调试. 代码: 首先编写一个Attribute [AttributeUsage(AttributeTargets.Enum | A ...

  9. 关于2008R2的序列号

    windows server 2008 r2 企业版序列号 BX4WB-3WTB8-HCRC9-BFFG3-FW26F P63JV-9RWW2-DJW7V-RHTMT-W8KWJ MDB49-7MYG ...

  10. PIE-SDK For C++栅格数据集的读取

    1.功能简介 栅格数据包含很多信息,在数据的运用中需要对数据的信息进行读取,目前PIE SDK支持多种数据格式的数据读取,下面对栅格数据格式的数据读取功能进行介绍. 2.功能实现说明 2.1 实现思路 ...