响应式开发中的px % em rem

单位

px

em         1em=16px

               汇继承父级元素的字体大小

               IE浏览器不支持em

rem        与em类似 

                会继承根元素的字体大小

                html {font-size:62.5%}   

                1 rem = 10px

单位rem的定义，去除了em的弊端

单位em的定义，适合手机端开发，但有弊端，各种浏览器对应的像素不统一

屏幕单位尺寸

网页开发中的单位rem:

网页开发中的单位em:

网页开发中的单位px:

网页开发中的单位：

单位

px

em         1em=16px

               汇继承父级元素的字体大小

               IE浏览器不支持em

rem        与em类似    

               会继承根元素的字体大小

               html{ font-size:62.5%; } 

网页中的单位

em      1em=16px；em会继承父级元素的字体大小

rem   会继承根元素的字体  html{font-size：62.5%}

em会继承父级元素的字体大小

1em=16px

IE的部分浏览器并不支持em

如果需要兼容旧的浏览器，px写前面，rem用来覆盖

网页开发中的单位：

-px 相对于显示屏幕分辨率的长度单位，但其大小无法跟随屏幕放大缩小，不过所有的浏览器都支持px单位

-em 相对于当前文本内的字体尺寸，1em = 16px（但不完全是），em会继承父级元素的字体大小，IE的部分浏览器并不支持em,em在谷歌是12px，在safi是10px，在火狐是18px，em是不稳定的

-rem 与 em类似，相对于HTML根节点的字体单位，rem会继承根元素的字体大小，html{font-size:62.5%}——10个像素（16的62.5%）

单位元素rem

4

3

2

1

html中默认的字体大小： 16px rem是稳定的（相对于em） rem对响应式更友好 使用bootStrap不用考虑rem的支持情况（高阶的浏览器都支持了）： 兼容性和响应式开发解决方案： px 和 rem 一起使用： 前面用px 后面用rem 用rem覆盖px（在支持rem的情况下）