vue中的rem如何配置
vue中rem的配置
開(kāi)發(fā)移動(dòng)端,我們常常會(huì)因?yàn)榘盐詹缓贸叨榷X(jué)得十分難受,因此可以用到rem+flex進(jìn)行,那么vue中我們?cè)撊绾稳绾闻渲媚兀?/p>
1.在js中統(tǒng)一計(jì)算進(jìn)行配置
新建src/utils/rem.js 代碼如下:
const setFontSize = (minFontSize = 12, maxFontSize = 16) => { ? ? // 7.5根據(jù)設(shè)計(jì)稿的橫向分辨率/100得來(lái) ? ? var deviceWidth = document.documentElement.clientWidth; ? ? // 獲取瀏覽器寬度 ? ? if(deviceWidth > 750) { ? ? ? ? // deviceWidth = 750; ? ? ? ? deviceWidth = 7.5 * 50; ? ? } else if (!deviceWidth) { ? ? ?? ? return; ? ? } ? ? const fontSize = Math.max(minFontSize, Math.min(12 * (deviceWidth / 320), maxFontSize)); ? ? document.documentElement.style.fontSize = `${fontSize}px`; ? ? // 這樣子的1rem=font-size的大小 ? ? // 當(dāng)然,萬(wàn)一你覺(jué)得這樣子做的rem太小,可以推薦你第二種寫(xiě)法,相對(duì)更加簡(jiǎn)便,代碼如下(注釋的) ? ? ?// 獲取瀏覽器寬度 ? ? //if(deviceWidth > 750) { ? ? ? ? // deviceWidth = 750; ? ? ? ? //deviceWidth = 7.5 * 50; ? ? //} ? ? // document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`; ? ? // 此時(shí)的fontSize大小為50px(375屏幕的時(shí)候) ? ? // 禁止雙擊放大 ? ? document.documentElement.addEventListener('touchstart', function (event) { ? ? ? ? if (event.touches.length > 1) { ? ? ? ? ? ? event.preventDefault(); ? ? ? ? } ? ? }, false); ? ? var lastTouchEnd = 0; ? ? document.documentElement.addEventListener('touchend', function (event) { ? ? ? ? var now = Date.now(); ? ? ? ? if (now - lastTouchEnd <= 300) { ? ? ? ? ? ? event.preventDefault(); ? ? ? ? } ? ? ? ? lastTouchEnd = now; ? ? }, false); } export default { ?? ?setFontSize , }
然后:在main.js中進(jìn)行引入:
// 樣式適應(yīng)處理 import Rem from './utils/rem'; /* eslint-disable no-new */ new Vue({ ? el: '#app', ? router, ? store, ? template: '<App/>', ? components: { App }, }); Rem.setFontSize();
當(dāng)然?。。。?!不能忘記設(shè)置默認(rèn)大小
在asstes/gloabl.less中設(shè)置默認(rèn)大小
//通用樣式 body{ ? font-family: "PingFangSC-Regular","PingFang SC","蘭亭黑","Helvetica",sans-serif; ? color: @color-text; ? font-size: 14px; ? // font-sizt: 0.28rem; 375屏?xí)r ? background-color: @color-background; }
記得要在main.js中引入
// 自定義樣式 require('./assets/css/global.less'); /* eslint-disable no-new */ new Vue({ ? el: '#app', ? router, ? store, ? template: '<App/>', ? components: { App }, }); Rem.setFontSize();
2.借助px2rem 插件
- 引入
npm install ?px2rem-loader ?lib-flexible --save? ? ? ? ? ? ? ? ? ? ? ? or yarn add px2rem-loader lib-flexible --save
- 在項(xiàng)目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
- 在build下的 utils.js中,找到generateLoaders 方法,在這里添加。
const px2remLoader = { ? loader: 'px2rem-loader', ? options: { ? remUnit: 37.5 ? } } function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader, px2remLoader] ?if (loader) { ? ?loaders.push({ ? ?loader: loader + '-loader', ? ?options: Object.assign({}, loaderOptions, { ? ? ?sourceMap: options.sourceMap ? ?}) ?}) }
重啟項(xiàng)目,會(huì)發(fā)現(xiàn)自己設(shè)置的px被轉(zhuǎn)為rem了
以上實(shí)現(xiàn)轉(zhuǎn)換適用于:
(1)組件中編寫(xiě)的下的css
(2)從index.js或者main.js中import ‘…/…/static/css/reset.css’引入css
(3)在組件的中引入css
另外的情況不適用:
(1)組件中@import “…/…/static/css/reset.css (可考慮上面(2)、(3)的形式引入)
(2)外部樣式:
(3)元素內(nèi)部樣式:style=”height: 417px; width: 550px;”
vue-cil 3.0 px自動(dòng)轉(zhuǎn)換為rem適配移動(dòng)端
1.下載postcss-pxtorem、lib-flexible
npm install lib-flexible --save-dev npm install postcss-pxtorem --save-dev
2.配置main.js
import 'lib-flexible/flexible' // px自動(dòng)轉(zhuǎn)rem
3.根路徑配置postcss.config.js
module.exports = { ? plugins: { ? ? autoprefixer: {}, ? ? "postcss-pxtorem": { ? ? ? "rootValue": 75, // 設(shè)計(jì)稿寬度的1/10, ? ? ? "propList": ['*'],// 需要做轉(zhuǎn)化處理的屬性,如`hight`、`width`、`margin`等,`*`表示全部 ? ? } ? } }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問(wèn)題(推薦)
最近公司項(xiàng)目需要,利用vue實(shí)現(xiàn)pdf導(dǎo)出,從而保存到本地打印出來(lái),說(shuō)起來(lái)好像也很容易,具體要怎么實(shí)現(xiàn)呢?下面小編給大家?guī)?lái)了vue實(shí)現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問(wèn)題,需要的朋友參考下吧2018-10-10Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue搜索高亮popsearch組件的實(shí)現(xiàn)示例
有時(shí)候給頁(yè)面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來(lái)就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來(lái)介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-09-09vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09