vh,vw快捷布局手机首页，最新响应式技术，大佬们都在用 - 前端学习笔记

首页 > 博客列表 > vh,vw快捷布局手机首页，最新响应式技术，大佬们都在用

博主信息

博文 65

粉丝 2

访问量 75007

专题推荐

更多>

效果展示：

vh,vw三行单列的手机首页布局

源码参考：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vh,vw三行单列的手机首页布局,色块填充</title>
    <style>
      .vh-vw1 {
        width: 100vw;
        height: 20vh;
        background-color: violet;
        margin: auto;
      }
      .vh-vw2 {
        width: 90vw;
        height: 60vh;
        background-color: coral;
        margin: auto;
      }
      .vh-vw3 {
        width: 100vw;
        height: 20vh;
        background-color: violet;
        margin: auto;
      }
    </style>
  </head>
  <body style="background-color: darkgray; margin: 0 auto">
    <div class="vh-vw1">第一行</div>
    <div class="vh-vw2">第二行</div>
    <div class="vh-vw3">第三行</div>
  </body>
</html>

案例总结：

vh: 视口”初始包含块”高度的 1 / 100
vw: 视口”初始包含块”宽度的 1 / 100
视口: 浏览器窗口中用来显示文档的可视区域, 不包括地址栏,菜单,工具条,状态栏,控制台

批改老师：

天蓬老师

批改状态：合格

老师批语：看起来似乎不错哟

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

速记Laravel7 Artisan 使用技巧｜附lavarel artisan 命令大全

2021-01-11 15:32:45