CSS中字体响应式的设置 rem与px的转换

在进行页面响应式设计中，往往需要根据屏幕分辨率来显示不同大小的字体。通常的做法是通过media queries给不同的分辨率指定不同的字体样式，例如：

body {font-size: 22px;
}
h1 {font-size:44px;
}@media (min-width: 768) {body {font-size: 17px; }h1 {font-size:24px;}
}

CSS中几种不同单位之间的比较

px：像素（Pixel）。相对长度单位，所占大小由屏幕分辨率决定。

em：相对长度单位。相当于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，它会继承父级元素的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem：CSS3新增的一个相对单位。rem是相对于根元素<html>，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |
-------------------------

为了方便计算，时常将在<html>元素中设置font-size值为62.5%:·

相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：

|  px  |     rem        |
-------------------------
|  12  | 12/10 = 1.2    |
|  14  | 14/10 = 1.4    |
|  16  | 16/10 = 1.6    |
|  18  | 18/10 = 1.8    |
|  20  | 20/10 = 2.0    |
|  24  | 24/10 = 2.4    |
|  30  | 30/10 = 3.0    |
|  36  | 36/10 = 3.6    |
|  42  | 42/10 = 4.2    |
|  48  | 48/10 = 4.8    |

1rem等于html根元素设定的font-size的px值。如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

html{font-size:14px}

pt：印刷业上常使用的单位，一般用于页面打印排版，即磅的意思。

%：另外我们还可以使用百分比来指定大小，它表示当前字体相对于浏览器默认字体大小的倍数。该单位在页面响应式设计中也被经常用到。

vw/vh/vmin/vmax：表示字体相对于viewport高或宽的大小。

来源： https://www.cnblogs.com/jaxu/p/4480806.html

http://caibaojian.com/rem-and-px.html

CSS中字体响应式的设置 rem与px的转换相关推荐

html中响应式字体怎么写,如何实现网页中字体响应式
回顾上一篇文章"[实战]用Media Query实现响应式Web布局",谈到页面框架实现响应式布局,那么这里就有一个疑问:字体也可以吗?答案:完全可以. 大伙都知道,现在设置字体大 ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
html中字体响应式怎么写,css字体单位之间的区分以及字体响应式实现_html/css_WEB-ITnose...
问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px = 1/16 em ...
css中字体大小font-size的设置
font-size CSS 属性指定字体的大小.因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小. /* <absolute-size>,绝对大小值 */ fo ...
html5如何设置字号,如何设置css中字体大小？
如何设置css中字体大小?下面本篇文章就来给大家介绍一下使用CSS设置字体大小的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS代码中,可以通过设置"font ...
php网页代码字体颜色设置,html和css中字体颜色设置的相关总结
网页中颜色的运用是网页必不可少的一个元素.使用颜色目的在于有区别.有动感.美观之用,同时颜色也是各种各样网页的样式表现元素之一,所以在我们的日常开发中不管是前端还是后端都离开不字体颜色,那么我们今天就 ...
html语言怎么改变文字大小,如何设置css中字体大小？
如何设置css中字体大小?下面本篇文章就来给大家介绍一下使用CSS设置字体大小的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS代码中,可以通过设置"font ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...
html中选择字体的元素,深入探讨CSS中字体元素
深入探讨CSS中字体元素更新时间:2006年09月25日 00:00:00 作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...

CSS中字体响应式的设置 rem与px的转换

CSS中几种不同单位之间的比较

CSS中字体响应式的设置 rem与px的转换相关推荐

最新文章

热门文章