深入理解网页前端开发尺寸单位:px、rem、vw、vh 的应用与区别

xiaowu1127 2024-07-02 19:49:18编程技术
82

 在现代网页开发中,选择合适的尺寸单位对于确保网页在不同设备上具有良好的兼容性和用户体验至关重要。本文将深入探讨网页前端开发中常用的尺寸单位,包括px、rem、vw和vh,通过具体的例子展示它们在PC端和移动端的表现和应用。了解这些单位的特点和使用场景,能够帮助开发者创建更加灵活和响应式的网页设计。

一、px像素单位

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

举例:

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

pc端

 移动端

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

二、rem单位

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

举例:

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 5.3333rem;
            height: 5.3333rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

pc端:

手机端:

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

三、vw和wh单位

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

举例:

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 26.6667vw;
            height: 26.6667vw;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

手机端:

 

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

web前端常用长度单位(px,em,rem,pt)

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.5em, 1em,2em等,通常1em=16px,为了简化font -size的换算,可以在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 

em有如下特点:

 因为“em”就是一个相对值,em的值并不是固定的;

 em会继续父级元素的字体大小。

 计算公式:1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值,这样的情况下“1.4em”可以            是“14px”,也可以是“20px”,或者说是“24px”。

 rem(root em,根em):是CSS3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素就可以成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容,对于不兼容的浏览器写一个绝对单位的声明就可以了。

 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.5em, 1em,2em等,通常1em=16px,为了简化font -size的换算,可以在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 

em有如下特点:

 因为“em”就是一个相对值,em的值并不是固定的;

 em会继续父级元素的字体大小。

 计算公式:1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值,这样的情况下“1.4em”可以            是“14px”,也可以是“20px”,或者说是“24px”。

 rem(root em,根em):是CSS3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素就可以成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容,对于不兼容的浏览器写一个绝对单位的声明就可以了。

 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

CSS3视口单位vw,wh

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

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

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

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

利用vw,wh实现在页面中响应垂直居中,只需要以下代码

#box { 
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
}

本文详细介绍了网页前端开发中几种常见的尺寸单位:px、rem、vw和vh。通过对比它们在PC端和移动端的表现,我们了解到px作为绝对单位,在不同设备上的表现不够灵活;而rem、vw和vh作为相对单位,能够更好地适应不同的屏幕尺寸,提供更佳的用户体验。特别是rem单位,因其相对于根元素字体尺寸的特性,成为了现代网页开发中的一种优选。掌握这些单位的特性和应用场景,对于开发出高质量、响应式的网页具有重要意义。希望本文能为广大开发者在选择和使用尺寸单位时提供有益的参考。


前端开发 网页开发 尺寸单位
THE END
战地网
频繁记录吧,生活的本意是开心

相关推荐

让 AI 帮你写代码:11款提升前端开发效率的AI编程工具推荐!
为了提高开发效率,越来越多的团队开始借助人工智能(AI)技术。AI编程工具不仅能自动化重复任务,还能提供智能建议,显著提升代码质量和开发速度。本文将为您介绍11款优秀的AI...
2024-07-20 编程技术
131

前端开发者必看!这5个开源项目颠覆你的想象
在前端开发的世界里,开源项目的繁荣为我们提供了无数的工具和框架,使得开发者能够更加高效地构建复杂的前端应用。本文将为你介绍五个极具创意的前端开发必备开源项目。它们...
2024-06-13 编程技术
69

2024年支持跨平台的前端开发框架大盘点
随着技术的快速发展和用户对多设备兼容性需求的增长,跨平台的前端开发框架变得越来越重要。本文中,我们将探讨2024年最值得关注和支持跨平台的前端开发框架,分析它们的特点...
2024-05-23 编程技术
84

好用的前端开发工具:这四款你必须知道!
为了帮助开发者更高效地工作,市场上有众多的前端开发工具可供选择。在这篇文章中我们将介绍四款比较常用的前端开发工具,具体哪一款最好用,因人而异,大家可以根据自己的情...
2024-05-09 编程技术
46

6款实用的前端开发工具推荐
前端开发是Web开发的重要组成部分,它涉及到网站或应用程序的界面设计和交互体验。为了高效地开发高质量的网站或应用程序,使用一些实用的前端开发工具是非常必要的。本文将介...
2024-05-07 编程技术
76

几款值得学习的前端框架新势力盘点
尽管 React、Vue、Angular、Next.js、Preact 等老牌框架依然稳坐市场主流,但新势力前端框架的崛起也为特定场景带来了更佳的适配和优化。接下来,我们将一探近三年年出现的前...
2024-04-08 编程技术
57