PC端自适应，万金油配置，原生，框架皆可用

最新推荐文章于 2024-02-18 12:02:59 发布

陈十一i

最新推荐文章于 2024-02-18 12:02:59 发布

阅读量180

点赞数

分类专栏： CSS杂谈文章标签： html webview css

本文链接：https://blog.csdn.net/xu20166424/article/details/125177988

版权

CSS杂谈专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
  <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>

    <!--  以 1920*1080 设计图为例子 -->
    <!-- 页面一级最外层大盒子元素宽度/设计图宽度  单位vw     vw会根据页面大小来自己调整-->
    <!-- >>  盒子内元素同理上面 在根据父盒子的大小来计算自己占父盒子的百分比 ，依次往下套-->

    <!-- 页面一级最外层大盒子元素高度/设计图高度  单位vh     vh会根据页面大小来自己调整-->
    <!-- >>   盒子内元素同理上面 在根据父盒子的大小来计算自己占父盒子的百分比，依次往下套 -->
    <style>
      .box1 {
        width: 5.2vw;
        height: 4.6vh;
        background-color: red;
      }
      .box2 {
        width: 10.2vw;
        height: 4.6vh;
        background-color: pink;
      }
      .box3 {
        width: 15.2vw;
        height: 4.6vh;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>