响应式布局之vw和vh

最新推荐文章于 2024-06-11 14:09:23 发布

得知此事须躬行

最新推荐文章于 2024-06-11 14:09:23 发布

阅读量457

点赞数

分类专栏： css 前端开发文章标签： css

本文链接：https://blog.csdn.net/qq_17355709/article/details/115394086

版权

前端开发同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

本文通过一个简单的HTML示例介绍了CSS中的vw和vh单位，这两个单位分别代表屏幕宽度和高度的百分比，常用于创建响应式网页设计。代码展示了如何设置一个div的宽高为屏幕尺寸的10%。同时，注释中提到window.innerHeight等于100vh，window.innerWidth等于100vw，强调了这两个JavaScript属性与视口单位的关联。

摘要由CSDN通过智能技术生成

css中一个单位的vw代表屏幕宽度的1/100，一个单位的vh代表屏幕高度的1/100。
直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vw vh test</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            background-color: red;
            width: 10vw; /* vw代表屏幕宽度的1/100 */
            height: 10vh; /* vh代表屏幕高度的1/100 */
        }
    </style>
</head>
<body>
    <p>vw vh 测试</p>
    <div id="container">
    </div>

    <script>
        // window.innerHeight === 100vh
        // window.innerWidth === 100vw
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

得知此事须躬行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式布局之vw和vh

css中一个单位的vw代表屏幕宽度的1/100，一个单位的vh代表屏幕高度的1/100。直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vw vh test<
复制链接

扫一扫

专栏目录