中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在Vue項目將 px 轉換為 rem

發布時間:2021-02-26 16:03:25 來源:億速云 閱讀:883 作者:戴恩恩 欄目:web開發

本文章向大家介紹如何在Vue項目將 px 轉換為 rem的基本知識點總結和需要注意事項,具有一定的參考價值,需要的朋友可以參考一下。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢,Vue中頁面使用的是局部刷新,不用每次跳轉頁面都要請求所有數據和dom,可以大大提升訪問速度和用戶體驗。

技術棧

vue-cli:使用腳手架工具創建項目。

postcss-pxtorem:轉換px為rem的插件。

自動設置根節點html的font-size

因為rem單位是相對于根節點的字體大小的,所以通過設置根節點的字體大小可以動態的改變rem的大小。

原理網上有很多文章分享,這里不具體解釋。

1、創建rem.js文件

很多人寫這種小工具文件會習慣性的加上閉包,這個其實是沒有必要的。ES6中每個文件都是單獨的一個模塊。

// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () {
 // 當前頁面寬度相對于 750 寬的縮放比例,可根據自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 設置頁面根節點字體大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
 setRem()
}

2、在main.js中引入rem.js

import './utils/rem'

引入文件后,查看頁面的html節點,是否有被自動添加 font-size。

注意:完成到這一步,也就是實現了rem布局,實際開發的時候,還是需要我們去計算對應的rem值去開發。

下一步我們就配置一下webpack,自動轉換px為對應的rem值。

配置 postcss-pxtorem 自動轉換px為rem

1、安裝 postcss-pxtorem

$ npm install postcss-pxtorem -D

2、修改 /build/utils.js 文件

找到 postcssLoader 的代碼塊

const postcssLoader = {
 loader: 'postcss-loader',
 options: {
  sourceMap: options.sourceMap
 }
}

修改為:

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap,
   plugins: [
    require('postcss-pxtorem')({
     'rootValue': 32,
     propList: ['*']
    })
   ]
 }
}

按照上述配置項目后,即可在開發中直接使用 px 單位開發。

例如設計給出的設計圖是 750 * 1136,那么可以直接在頁面中寫

body {
 width: 750px;
 height: 1136px;
}

將被轉換為

body {
 widht: 23.4375rem;
 height: 35.5rem;
}

以上就是小編為大家帶來的如何在Vue項目將 px 轉換為 rem的全部內容了,希望大家多多支持億速云!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

墨玉县| 南溪县| 信阳市| 太白县| 永善县| 新宾| 水城县| 永川市| 威信县| 泌阳县| 郓城县| 石楼县| 柳林县| 华坪县| 东海县| 博白县| 赞皇县| 莱西市| 昌都县| 台南市| 德惠市| 阳谷县| 揭西县| 正安县| 册亨县| 陇川县| 英吉沙县| 仙桃市| 澄迈县| 平定县| 台东县| 中超| 台南市| 宜川县| 广水市| 潞城市| 阳泉市| 汶川县| 鸡西市| 盐亭县| 明溪县|