html-css 14 像素/视口 vw

木一叶liuyue

已于 2022-03-16 21:21:32 修改

阅读量456

点赞数

分类专栏：前段文章标签： css html css3

于 2022-03-16 19:48:16 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/123534264

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

像素

<!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>
</head>

<style>
    .box1{
        width: 100px;
        height: 100px;
        /*物理像素*/
    }
</style>
<body>
    <!--
        像素
    屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
    分辨率，1920*680 就是像素的数量

        --物理像素 上述所说的小点就是物理像素
        --CSS像素，编写网页时，我们所用的像素都是CSS像素
            浏览器显示网页时，需要将css像素转化为物理像素再呈现
            一个css像素最终由几个物理像素显示，由浏览器绝对
            默认情况下，在PC端，一个css像素=一个物理像素

    视口（viewport）
            就是屏幕中用来显示网页的区域
            可以通过查看视口的大小来观察两个像素的比值
            默认情况下，视口的宽度是1536像素（css）
    -->
    <div class="box1"></div>
</body>
</html>

请添加图片描述

视口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!-- 设置视口大小  device-width表示设备的宽度（完美视口）  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <!-- 移动端默认的视口大小是980px(css)
    默认情况下，移动端的像素比就是 移动端宽度/设置的值=最佳视口
    （分辨率越高，像素比越小？）物理/css?
        如果我们直接在网页中编写移动端代码，这样在980视口下，
        像素比非常不好，导致网页中的内容非常非常小
        编写页面时，必须确保有一个合理的像素比
        1 css对应 2/3个物理像素
                通过meta标签设置视口大小
                每一款设备都有一个最佳的像素比，我们只需要将像素比设置为该值即可
material.io/resources/devices

完美视口：
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    -->
    <div class="box1"></div>
</body>
</html>

vw

<!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>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width:6.4vw;
        /*vw: viewport width 视口宽度
        100vw=1个视口宽度
        */

        height: 4.667vw;
        background-color: aliceblue;
    }
</style>
<body>
    <!-- 不同的设备完美视口大小不一样 
    设计图的宽度 750/1125px
    、
    创建一个48*35大小的元素
     100vw=750px(设计图的像素)
     ？vw=48px=6.4vw
     4.667vw=35px
    -->
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

木一叶liuyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css 14 像素/视口 vw

像素<!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>
复制链接

扫一扫