px,em,rem的关系
一直在使用px ,最近公司的项目用到了rem 这个单位,出于好奇对这个单位进行一下学习。
介绍
px 像素 相对长度单位 像素px是相对于 屏幕的分辨率
em 相对长度单位 。相对于 对象内文本的字体尺寸
如果当前行内文本的字体没有设置尺寸,则相对于浏览器的默认字体尺寸(16px)。
em的特点 em 的值并不是固定的,会继承父元素的字体大小
rem 是css3新增的一个相对单位(root em),是相对于根部元素的字体大小(html标签)
使用rem可以很好的解决h5手机页面屏幕适配的问题,能够减少开发出中因为适配问题带来的烦恼,提高我们的开发效率。
我们的适配是怎么做的
假设我们的设计图的款是 750px 设备的宽度是 450px 我们的希望 rem和设计图之前的转换为1rem=100px
我们只需要设置 html 元素的font-size=设备的宽度/(设计图的宽度/100)