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

vue實(shí)現(xiàn)PC端分辨率適配操作

 更新時(shí)間:2020年08月03日 11:12:36   作者:韓大璐  
這篇文章主要介紹了vue實(shí)現(xiàn)PC端分辨率適配操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

依賴(lài)

項(xiàng)目基礎(chǔ)配置使用 vue-cli 生成

自適應(yīng)方案核心: 阿里可伸縮布局方案 lib-flexible

px轉(zhuǎn)rem:px2rem,它有webpack的loader px2rem

開(kāi)始

先使用vue腳手架初始化一個(gè)webpack項(xiàng)目

vue init webpack 項(xiàng)目名

項(xiàng)目初始化好了之后,進(jìn)入項(xiàng)目目錄中 (cd 項(xiàng)目名) 安裝 lib-flexible 和 px2rem-loader

npm i lib-flexible -S

npm i px2rem-loader -D

安裝好了之后還需要在項(xiàng)目的入口文件 main.js 里引入 lib-flexible

// main.js

import 'lib-flexible'

接下來(lái)為了驗(yàn)證 lib-flexible 是否生效,可以將app.vue中的內(nèi)容改成:

<template>
 <div class="wrapper">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 <div class="box5"></div>
 </div>
</template>

<style>
 * {
 margin: 0;
 padding: 0;
 }
</style>

<style scoped>
 .wrapper div {
 height: 1rem;
 }
 .box1 {
 width: 2rem;
 background-color: coral;
 }
 .box2 {
 width: 4rem;
 background-color: skyblue;
 }
 .box3 {
 width: 6rem;
 background-color: palegreen;
 }
 .box4 {
 width: 8rem;
 background-color: wheat;
 }
 .box5 {
 width: 10rem;
 background-color: darkred;
 }
</style>

但是在實(shí)際開(kāi)發(fā)中,我們通過(guò)設(shè)計(jì)稿得到的單位是px,所以要將px轉(zhuǎn)換成rem再進(jìn)行樣式中。但如果都需要手動(dòng)轉(zhuǎn)的話(huà),就很麻煩,所以需要一個(gè)工具替我們完成這項(xiàng)工作,這個(gè)時(shí)候就需要配置px2rem了,當(dāng)然,編輯器可能也要對(duì)應(yīng)的插件。

在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他樣式文件 loader 最終是都是由 build/utils.js 里的一個(gè)方法生成的。我們只需在 cssLoader 后再加上一個(gè) px2remLoader 即可,px2rem-loader 的 remUnit 選項(xiàng)意思是 1rem=多少像素,結(jié)合 lib-flexible 的方案,我們將 px2remLoader 的 options.remUnit 設(shè)置成設(shè)計(jì)稿寬度的 1/10,這里我們假設(shè)設(shè)計(jì)稿寬為 1920px。

//utils.js
const cssLoader = {
 loader: 'css-loader',
 options: {
  sourceMap: options.sourceMap
 }
 }

 const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 192
 }
 }
 //...

放進(jìn)loaders數(shù)組中

//utils.js
function generateLoaders (loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

 if (loader) {
  loaders.push({
  loader: loader + '-loader',
  options: Object.assign({}, loaderOptions, {
   sourceMap: options.sourceMap
  })
  })
 }
//...

修改配置以后重啟服務(wù)器,將原來(lái)app.vue文件中的樣式改成:

<style scoped>
.wrapper div {
 height: 1rem;
}
.box1 {
 /* 750 * 20% */
 width: 150px;
 background-color: coral;
}
.box2 {
 /* 750 * 40% */
 width: 300px;
 background-color: skyblue;
}
.box3 {
 /* 750 * 60% */
 width: 450px;
 background-color: palegreen;
}
.box4 {
 /* 750 * 80% */
 width: 600px;
 background-color: wheat;
}
.box5 {
 /* 750 * 100% */
 width: 750px;
 background-color: darkred;
}
</style>

可以看到,適配依然生效。

以上是vue-cli2配置px2rem的方式,

如果腳手架用的是vue-cli3的話(huà),由于vue-cli3 生成的目錄結(jié)構(gòu)沒(méi)有build文件,所以在配置上也有一些不同。

vue-cli3配置方式:

找到文件 node_modules/@vue/cli-service/lib/config/css.js,添加規(guī)則:

 config.module
  .rule('css')
  .test(/\.css$/)
  .oneOf('vue')
  .resourceQuery(/\?vue/)
  .use('px2rem')
  .loader('px2rem-loader')
  .options({
   remUnit: 75
  })

remUnit的值請(qǐng)自行修改。

但是有一個(gè)問(wèn)題,我明明設(shè)置的寬度是按1920來(lái)的,為什么計(jì)算出來(lái)1rem=54px?

是不是插件哪里出了問(wèn)題,或者在哪里定義過(guò)跟54或者540相關(guān)的東西?

(我這里全局搜索了54找到flexible.js文件)

找到flexible.js文件看下:

找到問(wèn)題了就解決問(wèn)題,既然文件把屏幕寬度寫(xiě)死了,那就不寫(xiě)死:

function refreshRem(){
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540) {
   width = width * dpr;
  }
  var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
 }

現(xiàn)在再重啟項(xiàng)目,看一下運(yùn)行結(jié)果:

end

有問(wèn)題歡迎指正!

以上這篇vue實(shí)現(xiàn)PC端分辨率適配操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue-cli 組件的導(dǎo)入與使用教程詳解

    vue-cli 組件的導(dǎo)入與使用教程詳解

    這篇文章主要介紹了vue-cli--組件的導(dǎo)入與使用詳解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-04-04
  • vue中watch監(jiān)聽(tīng)路由傳來(lái)的參數(shù)變化問(wèn)題

    vue中watch監(jiān)聽(tīng)路由傳來(lái)的參數(shù)變化問(wèn)題

    這篇文章主要介紹了vue中watch監(jiān)聽(tīng)路由傳來(lái)的參數(shù)變化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • 詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法

    詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法

    這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07
  • vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作

    vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作

    這篇文章主要介紹了vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue祖孫組件之間的數(shù)據(jù)傳遞案例

    vue祖孫組件之間的數(shù)據(jù)傳遞案例

    這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-12-12
  • vue.js學(xué)習(xí)筆記之v-bind和v-on解析

    vue.js學(xué)習(xí)筆記之v-bind和v-on解析

    這篇文章主要介紹了vue.js學(xué)習(xí)筆記之v-bind和v-on解析,v-bind 指令用于響應(yīng)地更新 HTML 特征,v-on 指令用于監(jiān)聽(tīng)DOM事件,文中還給大家提到了v-bind,v-on的縮寫(xiě),感興趣的朋友參考下吧
    2018-05-05
  • Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟詳解

    Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟詳解

    這篇文章主要介紹了Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • 一文帶你詳細(xì)了解Vue中的v-for

    一文帶你詳細(xì)了解Vue中的v-for

    v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件

    vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件

    這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 使用vue.js?為基礎(chǔ)的仿QQ聊天室

    使用vue.js?為基礎(chǔ)的仿QQ聊天室

    這篇文章主要為大家介紹了基于vue.js的QQ聊天室,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-12-12

最新評(píng)論