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. CentOS7下安装FTP

    1.安装vsftpd yum install -y vsftpd 2.设置 使用命令systemctl status vsftpd.service查看ftp状态. 开启ftp systemctl st ...

  2. 【yii2】rules规则的默认值

    ExampleModel.php /** * {@inheritdoc} */ public function rules() { return [ ['updated_at','default',' ...

  3. 笔记-scrapy-extentions

    笔记-scrapy-extentions 1.      extentions 1.1.    开始 The extensions framework provides a mechanism for ...

  4. 自定义注解不能拦截controller层

    1,首先在springMVC的配置文件中,webapp/WEB-INF/servlet.xml,加上AOP的相关内容: <beans xmlns="http://www.springf ...

  5. tomcat7 配置 https安全访问

    在apache-tomcat-7.0.33-windows-x64.zip配置https,结果在配置SSL时遇到一些问题 1.用JDK自带的keytool来生成私有密钥和自签发的证书,如下: keyt ...

  6. Android面试收集录16 Android动画总结

    一.Android 动画分类 总的来说,Android动画可以分为两类,最初的传统动画和Android3.0 之后出现的属性动画: 传统动画又包括 帧动画(Frame Animation)和补间动画( ...

  7. P2183 巧克力(二分答案)

    P2183 巧克力 题目描述 佳佳邀请了M个同学到家里玩.为了招待客人,她需要将巧克力分给她的好朋友们.她有N(1<=N<=5000)块巧克力,但是大小各不一样,第i块巧克力大小为为1*X ...

  8. Android stadio 关联源码

    有时候,你想在Android stadio 里看源码, 然后Android stadio 会提示你去下载. 但是下载完了之后,有时候stadio 还是不能看源码.后来,参考这位博客,搞完了. http ...

  9. python基础----ipython快捷键

    Standard Ipython keyboard shortcut • Ctrl -C interrupt currently-executing code • Ctrl- U Discard al ...

  10. CocosCreator设置模拟器默认横竖屏以及机型

    之前好好的横屏,今天不知道为毛突然变成竖屏了,虽然可以在点击模拟器左上角进行设置,   但是 每次启动模拟器又变成竖屏了,折腾了很久,终于找到了设置的地方,记录下: