网页开发的一些尺寸单位

xiaowu1127

于 2022-10-30 23:25:53 发布

阅读量1k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/xiaowu1127/article/details/127606954

版权

一、px像素单位

二、rem单位

三、vw和wh单位

一、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>

手机端：