em rem 相对单位:  也可用于设置padding line-height等
em相对当前容器的默认字体设置
比如,所有浏览器默认字体都是16px,body{ font-size:62.5%}
以后即1em=10px; 1.2em=12px
在线转换tool: http://pxtoem.com/

em(css2.0) rem(css3.0)

rem相对于页根元素的字体大小,即 html 元素的字体大小
比如:html{font-size:16px;} 10rem=160px;
配合 使用media query 设置html的font-size;

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}}

em,rem的更多相关文章

  1. 彻底弄懂css中单位px和em,rem的区别

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

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

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

  3. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

  4. 关于CSS中的字体尺寸设置 em rem等

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  5. 彻底弄懂css中单位px和em,rem的区别 转的自己看

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

  6. px,em,rem的区别

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

  7. 弄懂css中单位px和em,rem的区别

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

  8. 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....

    一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...

  9. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  10. css中单位px和em,rem的区别[转载]

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

随机推荐

  1. python安装教程(面向对象的解释型计算机程序设计语言)

    inux下默认自带的.包括mac,是python2.x 但咱们玩的最新的  python3.x  怎么办呢centos下安装方法:  sudo yum install epel- sudo yum i ...

  2. 通信服务器哈希Socket查找(Delphi)

    在Socket通信服务器的开发中,我们经常会需要Socket与某个结构体指针进行绑定.当连接量很大时,意味着需要个高效的查找方法 Delphi中提供了哈希算法类,以此类为基础,修改出Socket专用M ...

  3. Python中的str

    str_lst = [ ('元素替换',), ('字符串切片',), ('字符串分割',), ('字符串连接',), ('元素计数',), ('寻找元素',), ('判断字符串的开头与结尾',), ( ...

  4. HyperLedger Fabric 1.4 比特币历史(1.1)

    比特币是一种数字货币,也是一种创新思维,把人们带入到一个无中心化.完全可信任.安全可靠的全新思维领域:一个叫“中本聪”的人或组织,使我们思维产生化学反应,他在2008年10月31日发表了比特币白皮书& ...

  5. python Re库的介绍

    re库的贪婪匹配和最小匹配 后面跟着?变为最小匹配

  6. PHP.24-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图

    添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace ...

  7. FIFO页面淘汰算法

    1.优异虚拟存储系统,若进程在内存中占3页(开始时内存为空),若采用先进先出(FIFO)页面淘汰算法,当执行以下访问页号序列后1,3,4,2,1,3,5,1,2,5,4,2,会产生多少次缺页(9) 在 ...

  8. windows 定时任务 - 定时关机

    添加定时关机,刚好可以利用windows定时任务 [开始]->[控制面板]->[任务计划]->[添加任务计划] 1.找到 shutdown.exe 设置每天执行 2.设置晚上10点 ...

  9. linux统计分析流量-wireshark

    wireshark是一款带界面的开源抓包工具,可以用来对系统流量进行统计分析. 安装 由于wireshark是带界面的,所以一般在界面环境下运行,可以通过yum安装: $ yum install -y ...

  10. 【Neural Network】林轩田机器学习技法

    首先从单层神经网络开始介绍 最简单的单层神经网络可以看成是多个Perception的线性组合,这种简单的组合可以达到一些复杂的boundary. 比如,最简单的逻辑运算AND  OR NOT都可以由多 ...