成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue 移動端屏幕適配 使用rem

番茄西紅柿 / 3376人閱讀

摘要：要想移動端適配并使用您需要先看這篇文章，配置好在中使用，就可以使用了如果項(xiàng)目已經(jīng)開發(fā)的差不多了，沒有用到又要使用，您用這招。如果對您有幫助請動動鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動力

要想移動端適配 并使用 rem  您需要先看這篇文章，配置好less ?? 在vue 中使用 less，就可以使用rem了

 

如果項(xiàng)目已經(jīng)開發(fā)的差不多了，沒有用到rem 又要使用rem，您用這招。

postcss-pxtorem：轉(zhuǎn)換px為rem的插件

安裝 postcss-pxtorem

npm install postcss-pxtorem --save

 

新建rem.js文件

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

并引用進(jìn)main.js文件內(nèi)

import ./rem

 

 修改.postcssrc.js 文件

在.postcssrc.js文件內(nèi)的 plugins 添加以下配置，配后就可以在開發(fā)中直接使用 px 單位開發(fā)了

    "postcss-pxtorem": {
      "rootValue": 32,
      "propList": ["*"]
    }

 

helloworld.vue

<template>
  <div class="hello">
    test
  div>
template>

<script>
  export default {
    name: HelloWorld,
    data() {
      return {
        msg: Welcome to Your Vue.js App
      }
    }
  }
script>

<style scoped>
  .hello {
    text-align: center;
    font-size: 20px;
    width: 300px;
    height: 400px;
    background:red;
  }
style>

效果

 

 

此隨筆乃本人學(xué)習(xí)工作記錄，如有疑問歡迎在下面評論，轉(zhuǎn)載請標(biāo)明出處。

如果對您有幫助請動動鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動力

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1759.html

相關(guān)文章

  • 【技術(shù)】移動端適配 px2rem/px2vw 的原理與實(shí)現(xiàn)

    摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。 簡介 【目標(biāo)】：前端開發(fā)移動端及H5時(shí)候，不需要再關(guān)心移動設(shè)備的大小，只需要按照固定設(shè)計(jì)稿的px值布局！【基礎(chǔ)】 dpr（設(shè)備像素比）css的像素px不等于設(shè)備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設(shè)備無關(guān)，css的px需要乘dpr計(jì)算為設(shè)備像素； css3 的 rem，即ro...

    AlexTuan 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊(duì)開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個(gè)呢在第一種方法中，時(shí)沒有任何問題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾樱嬖谛∮诘娘@示空間。 話說我剛工作的時(shí)候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊(duì)開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個(gè)呢在第一種方法中，時(shí)沒有任何問題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。 話說我剛工作的時(shí)候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    Pocher 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進(jìn)化

    摘要：是阿里團(tuán)隊(duì)開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個(gè)呢在第一種方法中，時(shí)沒有任何問題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。 話說我剛工作的時(shí)候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    MockingBird 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<