em：
所有浏览器都符合：1em=16px;
1.具有继承性
2.em的根元素是body，当设置了根元素的大小时，大小是定义的数字乘以根元素定义的大小值

rem：
1rem=16px
rem不具有继承性,其根元素是html,当设置了根元素的大小时，大小是定义的数字乘以根元素定义的大小值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
font-size: 2em; //不设置body时，32px,设置后为40px
}
p span{
font-size: 2em; //不设置body时，继承父类：2x16x2(父级的2)=64px;设置后为80；
}
body{
font-size: 20px;
}
.p2{
font-size: 2rem; //不设置HTML时，为32px,设置后为20px（2x10）
}
.p2 span{
font-size: 2rem; //不设置HTML时，为32px,设置后为20px,不具有继承性
}
html{
font-size: 10px;
}

</style>
</head>
<body>
<p>吃吃吃<span>周周周</span></p>
<p class="p2">jfeiwoj<span>ddd</span></p>

</body>
</html>

响应式布局
响应式布局：一个网站兼容多个终端，而不是每个终端做一个特定的版本。

响应式满足的三个要求：
1.必须建立网格布局
2.图片可伸缩
3.不同的样式分别写在不同的media query（媒体查询）里

css单位：em，rem解释的更多相关文章

  1. css单位em、px、rem和pt的区别

    1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...

  2. [css] px em rem

    一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用  1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...

  3. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  4. CSS中em,rem的区别

    首先这两个单位一般用在移动端 不太清楚得求证  再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...

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

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

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

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

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

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

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

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

  9. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  10. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

随机推荐

  1. Qt 程序打包发布

    Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,Qt 官方开发环境里自带了一个工具:windeployqt.exe.在Qt安装目录如:C:\Qt\Qt5.7. ...

  2. Java注解基础概念总结

    注解的概念 注解(Annotation),也叫元数据(Metadata),是Java5的新特性,JDK5引入了Metadata很容易的就能够调用Annotations.注解与类.接口.枚举在同一个层次 ...

  3. RecyclerView解密篇（一）

    一.前言 RecyclerView是谷歌V7包下新增的控件,用来替代ListView的使用,在RecyclerView标准化了ViewHolder类似于ListView中convertView用来做视 ...

  4. Mac OS X系统安装盘制作

    本文来记录一下制作苹果系统安装盘的步骤: 1. 准备一个空白的U盘或移动硬盘和去App Store下载好最新版本的系统,现在最新的是:macOS Sierra,下载后会默认打开安装进程,退出不管即可, ...

  5. postgresql pgsql最新版安装指南及数据存储路径更改及主从配置

    postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...

  6. 行为型模式之Observer模式

    观察者模式(又被称为发布-订阅模式.模型-视图模式.源-收听者模式或从属者模式) 观察者模式中,一个目标对象管理所有依赖于它的观察者对象,并且在它本身的状态改变时主动发出通知. 应用场景 拍卖会可以认 ...

  7. AngularJs学习

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. python3 与 pip3 安装与使用

    1. yum -y install openssl* (pip依赖ssl环境) 2.编译安装python3 下载地址:https://www.python.org/ftp/python/ .tgz c ...

  9. Android功能点

    1.获取屏幕尺寸.密度等信息. 1)最常用的方法: WindowManager windowManager = getWindowManager(); Display display = window ...

  10. php转化IP为整形

    <?php function a($ip){ $intIP = ip2long($ip); return $intIP; } function b($intIP){ $IPStr = long2 ...