实现页面跟随可视窗口缩放

最新推荐文章于 2025-01-20 23:30:32 发布

JSS00

最新推荐文章于 2025-01-20 23:30:32 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：页面缩放响应式 flex vw vh

本文链接：https://blog.youkuaiyun.com/YLXB2/article/details/94461102

CSS 专栏收录该内容

9 篇文章

订阅专栏

1.使用：vh、vw和flex

html：
<div class="contents">
        <div class="content left">left</div>
        <div class="content center">center</div>
        <div class="content right">right</div>
    </div>
css：
.contents {
    height:100vh;
    display:flex;
}
.left {
    width:10vw;
    background:yellow;
}
.center {
    width:80vw;
    background:blue;
}
.right {
    width:10vw;
    background:green;
}
运行效果：简单的三栏布局

vw：相对于可视窗口的宽度，可视窗口宽度是100vw，1vw相当于1%；
vh：相对于可视窗口的高度，可视窗口高度是100vh，1vh相当于1%；
vm：相对于可视窗口的宽度和高度，取决于哪个更小；
浏览器可是窗口宽高：window.innerWidth/window.innerHeight