国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue 移動端屏幕適配 使用rem

番茄西紅柿 / 3366人閱讀

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

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

 

如果項目已經開發的差不多了，沒有用到rem 又要使用rem，您用這招。

postcss-pxtorem：轉換px為rem的插件

安裝 postcss-pxtorem

npm install postcss-pxtorem --save

 

新建rem.js文件

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()
}

并引用進main.js文件內

import ./rem

 

 修改.postcssrc.js 文件

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

    "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>

效果

 

 

此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。

如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1759.html

相關文章

  • 【技術】移動端適配 px2rem/px2vw 的原理與實現

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

    AlexTuan 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    Pocher 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    MockingBird 評論0 收藏0

發表評論

0條評論

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