css单位:em,rem解释
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解释的更多相关文章
- css单位em、px、rem和pt的区别
1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...
- [css] px em rem
一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用 1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...
- 尺寸单位em,rem,vh,vw
这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...
- CSS中em,rem的区别
首先这两个单位一般用在移动端 不太清楚得求证 再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...
- 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....
一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- 详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...
随机推荐
- strsep和strtok_r替代strtok
char *strtok(char *str, const char *delim) 会修改数据源.外部加锁才线程安全(strtok执行结束再解锁执行另一个strtok循环知道工作完成) 主要是以互斥 ...
- ant 使用指南
一.概述 ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.在实际软件开发中,有很多地方可以用到ant. 开发环境: System:Windo ...
- LINUX下YUM源配置
转自:http://www.cnblogs.com/phoebus0501/archive/2010/12/14/1906144.html 1.确保RHEL5中已经安装了yum [root@lvs-m ...
- Shell 字符串的截取
直接上代码了. linux-:/.sh #!/bin/sh STR=HelloWorld echo 'STR == ' $STR :} # == } #结果为World } # Use : ${STR ...
- XP机器上WCF采用X509证书加密时IIS读取证书的授权
XP机器上WCF采用X509证书加密时IIS读取证书的授权 XP下的授权命令为:winhttpcertcfg -g -c LOCAL_MACHINE\My -s 证书名称 -a "ASPNE ...
- MongoDB 效率
写入: 插入100万条数据:用InsertMany,耗时16s左右. 读取: 读取300万条数据,耗时3600毫秒.
- gdb调试汇编堆栈过程的学习
gdb调试汇编堆栈过程的学习 以下为C源文件 使用gcc - g code.c -o code -m32指令在64位的机器上产生32位汇编,然后使用gdb example指令进入gdb调试器: 进入之 ...
- 采用cocos2d-x lua 的listview 实现pageview的翻页效果之上下翻页效果
--翻页滚动效果local function fnScrollViewScrolling( sender,eventType) -- body if eventType == 10 the ...
- IOS进阶之WKWebView
前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到 ...
- 如何编写稳定流畅的iOS移动端应用
原文链接:http://www.jianshu.com/p/f4adce56166f 不忘初心 在过去几年间,移动应用以雷霆之势席卷全球.我们在工作和休闲时间中使用互联网的方式,已经随着移动应用的前进 ...