网站定制深圳,网站地图提交入口,中国建筑网官网建设通,专业的网站建设价格作者:WangMin格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px#xff0c;而国外的网站大都喜欢用em和rem#xff0c;那么三者的区别与优势是什么#xff1f;接下来我们就来学习一下吧#xff01;单位px、em、rem分别表示什么#xff1f;1、 px(Pixel) 相对于显示…作者:WangMin格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px而国外的网站大都喜欢用em和rem那么三者的区别与优势是什么接下来我们就来学习一下吧单位px、em、rem分别表示什么1、 px(Pixel) 相对于显示器分辨率而言表示“绝对尺寸”(并非真正的绝对)实际上就是css中定义的像素(这里的像素与设备的物理像素有一定的区别)利用px设置字体大小及元素宽高等比较稳定和精确。px的特点如下IE无法调整那些使用px作为单位的字体大小国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位Firefox能够调整px和emrem但是96%以上的中国网民使用IE浏览器(或内核)。px不能适应浏览器缩放时产生的变化因此一般不用于是响应式网站。2、em 表示相对尺寸其相对于当前对象内 (父级元素) 文本的字体尺寸 font-size(如当前对行内文本的字体尺寸未被设置则相对于浏览器的默认字体尺寸。 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合1em 16px。)。使用em可以较好的相应设备屏幕尺寸的变化但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size如有遗漏可能会导致错误。em的特点如下em的值并不是固定的em会继承父级元素的字体大小。3、rem 为css3新增的一个相对单位使用rem为元素设定字体大小时仍然是相对大小但是rem只相对于HTML根元素的font-size因此只需要确定这一个font-size。使用rem的好处是只修改根元素就可以成比例的调整所有字体的大小又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外所有浏览器均已支持rem。以下是我在 caniuse对rem属性的兼容表对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。如下元素{font-size:14px;font-size:2rem;}rem、em与px间的换算关系1、 px与em之间的换算关系任意浏览器的默认字体大小16px。所有未经调整的浏览器都符合: 1em16px。那么12px0.75em,10px0.625em这样换算起来有点麻烦而且容易换算出错。所以为了简化font-size的换算我们可以制定一个单位换算基准需要在css中的body选择器中声明font-size62.5%代码如下body{font-size:62.5% ;}这就使em值变为 16px*62.5%10px, 这样12px1.2em, 10px1em, 也就是说只需要将你的原来的px数值除以10然后换上em作为单位就行了。基准对照表如下图总结我们在写CSS的时候需要注意以下两点1)body选择器中声明font-size62.5%2)将你的需要转换的px数值除以10然后换上em作为单位3)重新计算那些被放大的字体的em数值。避免字体大小的重复声明。我们来举一个例子来说明一下 你猜我字体是多大embody{font-size:62.5%;}div{font-size:1.2em; //font-size10 *1.2 12px}p{font-size:1.2em; //font-size 12*1.214.4px}我们可以的到p的字体大小为14.4px如下p的字体大小是怎么计算的呢因为em相对于当前对象内 (父级元素) 文本的字体尺寸p是div的子元素div是body的子元素要想的到p的字体大小就要先的到div的字体大小因为body选择器中声明了font-size62.5%所以div的字体大小为1.2*1012px相当于div声明了font-size75%(1em12px)因为p1.2em所以p的字体大小转换为px:12*1.214.4px。这里就应证了em单位的缺点。2、 px与rem之间的换算关系从上面可以得到rem是一个相对大小的值它相对于根元素浏览器的默认字体尺寸也是16px。这时 px与rem之间的换算是1rem16rem。下面是默认16px与rem之间的转换关系pxrem1212/16 .751414/16 .8751616/16 11818/16 1.1252020/16 1.252424/16 1.53030/16 1.8753636/16 2.254242/16 2.6254848/16 3比如假设我们设置html的字体大小的值为htmlfont-size: 87.5%;(也就是1rem14px)。然后其他的字体大小就是将你要的值除以14得到的值加上 rem 单位。上面的14是个变量相对于你对根元素html字体大小的设定如果你设定的是62.5%那除数就变成10了。如果你根元素的字体大小选62.5%那px和rem之间的换算就是px直接除以10就得到rem了。为了简化font-size的换算我们在html中也可以写入以下代码:html{font-size: 62.5%; /* 公式16px*62.5%10px */}此时上面示例中所示的值将会改变:pxrem1212/10 1.21414/10 1.41616/10 1.61818/10 1.82020/10 2.02424/10 2.43030/10 3.03636/10 3.64242/10 4.24848/10 4.8我们来举一个例子来说明一下 你猜我字体是多大remhtml{font-size: 62.5%; /* 公式16px*62.5%10px */}div{font-size:2rem;}p{font-size:2rem;}我们可以得到p的字体大小转换为px为20pxp的字体大小是怎么计算的呢因为rem只相对于HTML根元素的font-size所以rem 以html{ font-size: 62.5%; }为转换基准 公式16px*62.5%10px相当于1rem10px然后就可以得到p的字体大小10*2rem20px。注意若没有在根元素(html字体)指定参照值那浏览器默认1rem 就是16px若指定值则1rem就是指定值 。html设置为62.5%或者10px 时会失效是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px 以下的大小有关。所以使用rem单位html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。总的来说为了简化font-size的换算我们通常将rem与em的换算基准设置为 font-size : 62.5%; 则此时1rem1em 16px * 62.5% 10px 这样10px 1em1rem方便于我们使用。以上仅是个人见解若有不足之处欢迎在下方评论指出那就先分享到这里!! 后续继续更新!!
