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

最新推荐文章于 2023-11-02 10:50:44 发布

原创最新推荐文章于 2023-11-02 10:50:44 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#页面缩放 #响应式 #flex #vw #vh

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