高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年网页设计字体大小单位(推荐4篇)

网页设计字体大小单位 第1篇

px单位是绝对单位,一般用于pc端网页开发。因为是绝对单位所以在移动端上的使用体验并不是很好

举例:

pc端

移动端

px单位在pc端都是200px,并没有随着屏幕尺寸而变换

网页设计字体大小单位 第2篇

vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局

网页设计字体大小单位 第3篇

rem它是描述相对于当前根元素字体尺寸,是相对单位。它可以根据根元素的变换而变换,根元素一般指的是html的font-size,默认值是1rem=16px

举例:

pc端:

手机端:

rem单位是相对单位所以可以很好的适配手机端

网页设计字体大小单位 第4篇

vw跟wh单位是指相对于视口的宽度视口的宽度或者高度的长度单位。1vw为视口宽度的百分号之一,1vh为视口长度的百分之一。vw跟vh是根据视口尺寸而变化的所以常用于手机端。vw跟wh不能同时作用与一个元素上

举例:

手机端:

这是vw的举例说明而vh也是如此,盒子的vw单位没变但是随着手机屏幕大小发生改变,盒子的大小也发生了改变。

猜你喜欢