设计稿750px 配置rem

最新推荐文章于 2023-05-16 09:22:52 发布

前端酱紫

最新推荐文章于 2023-05-16 09:22:52 发布

阅读量3.1k

点赞数

分类专栏： Javascript 文章标签： rem

本文链接：https://blog.csdn.net/wuj1935/article/details/119295316

版权

Javascript 同时被 2 个专栏收录

75 篇文章 2 订阅

订阅专栏

项目记一笔

46 篇文章 3 订阅

订阅专栏

设计稿750px 配置rem

获取设备宽度
>750 等于750
<320 等于320
设置字体大小设备宽度/7.5 1rem=100像素
// 设计稿是750px
// 1rem == 100px的设计稿宽度
// 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem
调用
window.onresize = function(){ 调用 }

// public/js/rem.js
function remSize() {
    let screenWidth = window.document.documentElement.clientWidth || window.innerWidth;
    if (screenWidth > 750) {
        screenWidth = 750;
    }
    if (screenWidth < 320) {
        screenWidth = 320
    }
    console.log('screenWidth:', screenWidth);
    document.documentElement.style.fontSize = (screenWidth / 7.5) + 'px';
    document.querySelector('body').style.fontSize = 0.3 + 'rem'
}
remSize()
window.onresize = function () {
    remSize()
}

在 public/index.html 里引入js文件

// public/index.html
<!DOCTYPE html>
<html lang="">

<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">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- 这里引入rem.js -->
  <script src="<%= BASE_URL %>js/rem.js"></script>
</body>

</html>

前端酱紫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
设计稿750px 配置rem

设计稿750px 配置rem获取设备宽度750 等于750<320 等于320设置字体大小设备宽度/7.5 1rem=100像素// 设计稿是750px// 设置1半的宽度，就是375px// 1rem == 100px的设计稿宽度// 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem，100px等于1rem调用window.onresize = function(){ 调用 }function remSize() {
复制链接

扫一扫