小编给大家分享一下css中常用相对单位em和rem的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的镇平网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
css中相对长度单位包括有:em,rem,points,pica,ex,ch等,下面我们就来介绍一下相对长度中常用的2个单位:em和rem单位是如何使用的。
css长度单位之em单位
em是相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的。例:1em相当于当前的字体尺寸(font-size属性),那么2em相当于当前字体尺寸的2倍。若用于其他属性(width,height),则是相对于本身元素的font-size。可以作用在width、height、line-height、margin、padding、border等样式的设置上。
我们具体的看一个简单的示例,来了解em。
我是父元素div我是子元素p 我是孙元素span
效果图:
em的特点:
em单位的值并不是固定的,子元素字体大小的em是相对于父元素字体大小;
元素的width/height/padding/margin用em的话是相对于该元素的font-size
css长度单位之rem单位
rem是CSS3新增的一个相对字体长度单位,只相对根元素即html元素字体大小来确定其长度,是做移动端页面的必不可少的长度单位。
div1---48pxdiv2---8px
效果图:
例子中html的字体大小为固定大小16px,设置div1的字体大小为3rem,而:3rem = 16px * 3 = 48px,所以div1 的字体大小为48;
设置div2的字体大小为0.5rem,而:0.5rem = 16px * 0.5 = 8px,所以div2的字体大小为8px。
em与rem对比
我们通过一个简单的例子来看看em与rem之间的区别
html设置字体大小为16px,body设置为8px。
div1的字体大小为3rem(3rem = 16px * 3 = 48px)div1--宽20em(960px),高20rem(320px)div2
宽10em(480px)
高10rem(160px)