365bet网址搜索器 今天是2019年 09月 06日 星期五
当前所在位置: 主页 > bet365手机客户端下载 >

Rem,Em差异和使用分析。

rem与em和用法之间的区别
内在差异:rem是参考HTML的源大小,em是参考主体的源大小。
优点:为了使用px更方便的rem / em单元,只需要在更改屏幕大小时根据html / body进行更改,并且不必为每种字体大小重写不同的标签。
1
如果系统处理(rem到px转换)仅显示html字体大小,请使用rem作为单位。
使用mediaquery进行智能设计时(以bootstrap为例):

您需要做的第一件事是确定通常基于10px(一个方便的计算器)的rem基础(即html字体大小),它可以基于您自己的习惯。

确定基本HTML的百分比(rem表示HTML字体大小的百分比)。比率是设定密度本身除以默认字体大小(16px)。
例如,如果标准是10px,则参考百分比是10px / 16px = 62。
换句话说,将html字体大小设置为62。
5%
温度。
如果设置了html的基本百分比,则该元素基于其处于rem的基数(基值设置为a)。转换方法如下。例如,p标签的字体大小设置为20像素。Rem表示2 rem(表达式:rem值=设置的字体大小(20 px)/基值(10 px)= 2 rem)。
接收实现:在监视屏幕大小的变化时,使用@media在html中设置不同的基值
如下例所示,如果屏幕宽度小于414像素,则使用8个像素;如果灵敏度较低(415像素到1365像素),则使用10个像素。当1266像素大于1366像素时使用。
HTML{
字体大小:62
基于5%// 10像素,类a的字体大小为20像素。

一个{
字体大小:2 rem。
@中间屏幕(最大宽度:414像素){
HTML{
字体大小:50%。基于8px,类a的字体大小为16px
@mediascreenand(最小宽度:1366像素){
HTML{
字体大小:75%。//基于12px,类a的字体大小为24px
2
在系统处理em时将em用作单位(转换为px),只需查看正文的字体大小即可。

使用px作为参考点
在这种情况下,您只需要设置基数,然后将所需的字体大小除以设定的基值(em值)。例如,如果em base设置为10px并且设置了标签,则字体大小将为15px,em =要设置的值(15px)/ base(10px)= 1。
5点钟
例如:
身体{
字体大小:10像素。//基于10个像素,类a的字体大小为20个像素。

一个{
字体大小:2 em。
@中间屏幕(最大宽度:414像素){
身体{
字体大小:8像素。基于8px,类a的字体大小为16px
@mediascreenand(最小宽度:1366像素){
身体{
字体大小:12 px。//基于12px,类a的字体大小为24px

使用百分比作为参考点
例如,使用与上面的rem相同的方法。
身体{
字体大小:62
基于5%// 10像素,类a的字体大小为20像素。

一个{
字体大小:2 em。
@中间屏幕(最大宽度:414像素){
身体{
字体大小:50%。基于8px,类a的字体大小为16px
@mediascreenand(最小宽度:1366像素){
身体{
字体大小:75%。//基于12px,类a的字体大小为24px
注意:事实上,两者在使用时是相似的。Rem也可以直接基于px,但两者指的是不同的标签。


发布于:2019-09-06

上一篇:姜堰工厂负责人出去看后排气管是否被排气管点燃,有测试孔

下一篇:没有了