响应式布局

Evan-Sky

已于 2024-02-27 09:14:23 修改

阅读量392

点赞数 8

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

于 2023-12-11 14:57:46 首次发布

本文链接：https://blog.csdn.net/weixin_60053942/article/details/134927335

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vw、vh

1 vw = 1% 视口宽度

如果要在 750 px 设计稿中使用 vw 做响应式

1 vw = 7.5 px , 1px = 1 / 7.5 vw

test.html

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport"  
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  <title>Document</title>  
  <link href="./test.css" rel="stylesheet">  
</head>  
<body>  
<div class="box">  
  hello word  
</div>  
</body>  
</html>

test.scss
- 如果要在 750 设计稿中，宽度为 100px，那么就写成 100vw/$vw width: 100vw/$vw;

body {  
  margin: 0;  
}  
  
$vw: 7.5;  
  
.box {  
  // 如果要在 750 设计稿中，宽度为 100px，那么就写成 100vw/$vw  width: 100vw/$vw;  
  height: 100vw/$vw;  
  background: #000;  
}

test.css

body {  
  margin: 0;  
}  
  
.box {  
  width: 13.3333333333vw;  
  height: 13.3333333333vw;  
  background: #000;  
}

rem

1 rem = 1 html根字号

test.html

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport"  
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  <title>test</title>  
  <script>  
   const rootEl = document.documentElement;  
   const viewportWidth = window.innerWidth;  
  
   rootEl.style.fontSize = viewportWidth / 25 + 'px';  
  </script>  
  <link href="./test.css" rel="stylesheet">  
</head>  
<body>  
<div class="box">  
  hello word  
</div>  
</body>  
</html>

以 25份为基准
- 屏幕分成 25 份, html 的 font-size: viewportWidth / 25 + ‘px’; 也就是 4vw
设计稿也要分成 25 份
- 750px 设计稿分成 25 份
- 750 px / 25 = 30 px, 1 份 = 30 px 1 rem = 30 px
test.scss

body {  
  margin: 0;  
}  
  
$rem: 30;  
  
.box {  
  width: 375rem/$rem;  
  height: 100px;  
  background: palegoldenrod;  
}

转换成 css test.css

body {  
  margin: 0;  
}  
  
.box {  
  width: 12.5rem;  
  height: 100px;  
  background: palegoldenrod;  
}

Evan-Sky

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录