日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

使用postcss插件配置rem和手寫rem的方法

作者：洋養楊陽 更新時間： 2022-01-13 編程語言

一、下載postcss插件適配rem

1.0 安裝依賴

在文件目錄下cmd到黑窗戶 運行以下代碼

npm install amfe-flexible -S
npm install postcss-px2rem -S

1.1 引入lib-flexible

// 在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";

注意事項（important）: 由于flexible會動態給頁面header中添加標簽，所以務必請把目錄 public/index.html 中的這個標簽刪除！！！

1.2 PostCSS 配置

新建postcss-pxtorem 或者在postcss.config.js中都能配置

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

1.3 使用方法

上面的步驟寫完后，使用時設計圖750px的，那設計圖要是375px的寬度，那代碼里面寫成375px。因為vant中的寬度是雙面屏,所以寬度需要減半。

二、 手寫rem

style

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .h {
      width: 7.5rem;
      height: 0.8rem;
      background-color: red;
    }
    .c {
      width: 7.5rem;
      background-color: orange;
      height: 5rem;
    }
    .f {
      width: 7.5rem;
      background-color: orchid;
      height: 0.5rem;
    }
  </style>

body


<body>
  <div class="h"></div>
  <div class="c"></div>
  <div class="f"></div>
</body>

script

<script>
	// 封裝一個根據屏幕尺寸自動改變html的font-size大小的函數
function rem() {
    //  獲取html的寬度
    let htmlW = document.documentElement.clientWidth; 
    // 獲取body的寬度
    let bodyW = document.body.clientWidth;
    // IE10以下獲取不到HTML的寬度    兼容處理
    let W = htmlW || bodyW;
    // 設置html的font-size大小
    // 因為設計圖尺寸是750，所以平分，這樣*100之后，1rem就等于100px;
    document.documentElement.style.fontSize = (W / 750 * 100) + 'px';
  }
  // 定義屏幕寬度改變時觸發
  window.onresize = function () {
    rem()
  }
  // 設置初始觸發一次，刷新也都會觸發
rem()
	</script>

原文鏈接：https://blog.csdn.net/weixin_58102387/article/details/122294200

欄目分類
最近更新