欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

postcss-pxtorem移動端適配的實現(xiàn)

  發(fā)布時間：2019-12-03 15:33:53   作者：woniu12   我要評論
這篇文章主要介紹了postcss-pxtorem移動端適配的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

執(zhí)行命令 安裝插件postcss-pxtorem 

npm install postcss-pxtorem -D

postcss.config.js 新建package.json同一個目錄下，文件內(nèi)容如下

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 32,//結果為：設計稿元素尺寸/32(一般750px的設計稿的根元素大小設置32)，比如元素寬320px,最終頁面會換算成 10rem
      propList: ['*'], //屬性的選擇器，*表示通用
      selectorBlackList:[]    忽略的選擇器   .ig-  表示 .ig- 開頭的都不會轉換
    }
  }
}

postcss.config.js此文件配置完成后需要重啟項目生效

在根目錄src中新建util目錄下新建rem.js等比適配文件

// rem等比適配配置文件
// 基準大小
const baseSize = 750 // 注意此值要與 postcss.config.js 文件中的 rootValue保持一致
// 設置 rem 函數(shù)
function setRem () {
  // 當前頁面寬度相對于 375寬的縮放比例，可根據(jù)自己需要修改,一般設計稿都是寬750(圖方便可以拿到設計圖后改過來)。
  const scale = document.documentElement.clientWidth / 375
  // 設置頁面根節(jié)點字體大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據(jù)實際業(yè)務需求調(diào)整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
}

在 main.js中引入 rem.js 文件，然后啟動項目

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • 淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別

    這篇文章主要介紹了CSS中單位px、rem、em、vh、vw之間的區(qū)別,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-05-25

  • CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解

    這篇文章主要介紹了CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2020-03-16

  • css基于媒體查詢和 rem 的響應式布局實踐

    這篇文章主要介紹了css基于媒體查詢和 rem 的響應式布局實踐的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-30

  • 移動端使用 rem 單位時 css sprites 定位問題的解決

    現(xiàn)在開發(fā)移動端 wap 頁面，相信大家都會使用強大的 rem 單位去適配各種機型和屏幕；這篇文章主要介紹了移動端使用 rem 單位時 css sprites 定位問題的解決，小編覺得挺不錯
    2018-06-20

  • CSS中px em rem區(qū)別與使用

    本文主要介紹了CSS中px em rem區(qū)別與使用。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-27

  • css中px、em和rem的區(qū)別總結

    相信每位前端工程師們都有這么一個體會，國內(nèi)的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？下面這篇文章小編就來給大
    2017-02-24

  • 知識普及：徹底搞懂CSS中單位px和em,rem的區(qū)別

    國內(nèi)的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別呢？下面腳本之家小編給大家詳細介紹下
    2016-05-06

  • CSS 中 em 和 rem 單位的區(qū)別解析

    這篇文章主要介紹了CSS 中 em 和 rem 單位的區(qū)別,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-05-24

最新評論