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

vue中的rem如何配置

 更新時(shí)間:2022年08月01日 09:58:32   作者:前端毒腳show  
這篇文章主要介紹了vue中的rem如何配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)題(推薦)

    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-10
  • vuex安裝失敗解決的方法實(shí)例

    vuex安裝失敗解決的方法實(shí)例

    Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex安裝失敗解決的方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • Vue中父子組件的值傳遞與方法傳遞

    Vue中父子組件的值傳遞與方法傳遞

    這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • vue 路由懶加載詳情

    vue 路由懶加載詳情

    這篇文章主要介紹了vue 路由懶加載,當(dāng)打包構(gòu)建應(yīng)用時(shí),JavaScript 包會(huì)變得非常大,影響頁(yè)面加載,這便是vue 路由懶加載,接下來(lái)隨小編一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧
    2021-10-10
  • Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹

    Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹

    這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題

    vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題

    這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue搜索高亮popsearch組件的實(shí)現(xiàn)示例

    vue搜索高亮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-09
  • 詳細(xì)對(duì)比Ember.js和Vue.js

    詳細(xì)對(duì)比Ember.js和Vue.js

    這篇文章主要介紹了詳細(xì)對(duì)比Ember.js和Vue.js,對(duì)JS框架感興趣的同學(xué),可以參考下
    2021-05-05
  • vue2響應(yīng)式的缺點(diǎn)影響

    vue2響應(yīng)式的缺點(diǎn)影響

    這篇文章主要介紹了vue2響應(yīng)式的缺點(diǎn)影響,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-05-05
  • vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能(案例代碼)

    vue3??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

最新評(píng)論