国产成人精品18p,天天干成人网,无码专区狠狠躁天天躁,美女脱精光隐私扒开免费观看

vue項目中使用rem替換px的實(shí)現示例

發(fā)布時(shí)間：2021-08-17 12:16 來(lái)源： 閱讀：0 作者：JackieDYH 欄目： JavaScript 歡迎投稿：712375056

目錄

移動(dòng)端頁(yè)面適配，rem和vw適配方案

基礎點(diǎn)：rem相對根節點(diǎn)字體的大小。所以不用px;
根字體：字體的大小px;
px：你就當成cm(厘米)這樣的東西吧；
基準：750設計稿（一般UI設計師給的都是750的設計稿）；

工具

vue-cli:使用腳手架來(lái)搭建vue前端項目
postcss:就是postcss用js插件幫你轉換css樣式的一個(gè)工具。比如，這里的把你的文件里面16px替換成1rem(根大小默認16px的情況）；這樣你就不用自己去算了！
cssrem:主要是幫你把px(UI設計給設計稿上的px)轉換成對應的rem
然后：還要用js代碼去動(dòng)態(tài)算根目錄應該有的字體大小，反正就是一段js代碼去動(dòng)態(tài)獲取屏幕寬度

安裝插件

npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

然后再index.html里面加上

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在項目根目錄下添加.postcssrc.js文件

module.exports = {
    "plugins": {
      "postcss-import": {},      //用于@import導入css文件
      "postcss-url": {},           //路徑引入css文件或node_modules文件
      "postcss-aspect-ratio-mini": {},   //用來(lái)處理元素容器寬高比
      "postcss-write-svg": { utf8: false },    //用來(lái)處理移動(dòng)端1px的解決方案。該插件主要使用的是border-image和background來(lái)做1px的相關(guān)處理。
      "postcss-cssnext": {},  //該插件可以讓我們使用CSS未來(lái)的特性，其會(huì )對這些特性做相關(guān)的兼容性處理。
      "postcss-px-to-viewport": {    //把px單位轉換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。
          viewportWidth: 750,    //視窗的寬度
          viewportHeight: 1334,   //視窗的高度
          unitPrecision: 3,    //將px轉化為視窗單位值的小數位數
          viewportUnit: 'vw',    //指定要轉換成的視窗單位值
          selectorBlackList: ['.ignore', '.hairlines'],    //指定不轉換視窗單位值得類(lèi)，可以自定義，可以無(wú)限添加
          minPixelValue: 1,    //小于等于1px不轉換為視窗單位
          mediaQuery: false   //允許在媒體查詢(xún)中使用px
      },
      "postcss-viewport-units":{}, //給vw、vh、vmin和vmax做適配的操作,這是實(shí)現vw布局必不可少的一個(gè)插件
      "cssnano": {    //主要用來(lái)壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。
          preset: "advanced",   //重復調用
          autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事實(shí)上只需要一個(gè)，所以把默認的autoprefixer刪除掉，然后把cssnano中的autoprefixer設置為false。
          "postcss-zindex": false   //只要啟用了這個(gè)插件，z-index的值就會(huì )重置為1
       } 
    }
  }

當你切換不同尺寸的屏幕的時(shí)候，需要動(dòng)態(tài)改變根字體的大小，一段簡(jiǎn)單的js插入在head里面：在public目錄下直接新建的shipei.js,然后將這個(gè)js引入到index.html的head里面

//shipei.js
(function() {
   function autoRootFontSize() {
       document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
         // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小變成了375px,那么字體就是16px;也就是根字體fontSize大小和屏幕大小成正比變化！是不是很簡(jiǎn)單
   }
   window.addEventListener('resize', autoRootFontSize);
   autoRootFontSize();
})();

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/public.css" rel="external nofollow"  type="text/css">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

注意 放到 public 里的東西，可以不用寫(xiě)開(kāi)頭目錄，腳手架打包的時(shí)候找不到，會(huì )去public文件夾找的

關(guān)于

getBoundingClientRect().width獲取到的其實(shí)是父級的右邊距離瀏覽器原點(diǎn)(0,0)左邊距離瀏覽器原點(diǎn)(0,0)的距離,即父級的寬度+2padding+2border。
此時(shí)的clientWidth等于父級的寬度+2*padding,不包括邊框的寬度。
當不隱藏子級內容,即overflow為auto時(shí)，前者的寬度依然為這個(gè)數字,因為父級并沒(méi)有改編盒模型。后者的寬度為上述得到的寬度-滾動(dòng)條的寬度(17px);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
                <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
                    height: 400px; width: 600px; border: solid 3px #f00;">
                </div>
            </div>
    </body>
</html>
<script type="text/javascript">
    /* 
     getBoundingClientRect().width獲取到的其實(shí)是父級的右邊距離瀏覽器原點(diǎn)(0,0)左邊距離瀏覽器原點(diǎn)(0,0)的距離,即父級的寬度+2padding+2border。
     此時(shí)的clientWidth等于父級的寬度+2*padding,不包括邊框的寬度。
     當不隱藏子級內容,即overflow為auto時(shí)，前者的寬度依然為這個(gè)數字,因為父級并沒(méi)有改編盒模型。后者的寬度為上述得到的寬度-滾動(dòng)條的寬度(17px);例子如下:
     */
     var divP = document.getElementById('divParent');
            var divD = document.getElementById('divDisplay');
    
            var clientWidth = divP.clientWidth;
            var getWidth = divP.getBoundingClientRect().width;
            divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
            divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</script>

運行結果是clientWidth為516,他的計算是內容寬+2padding
getWidth(也就是getBoundingClientRect().width）包括內容寬+2padding+2border
第五步：就是將設計稿上的px轉換成rem為單位：安裝 cssrem插件 (在插件市場(chǎng)）：
然后在 文件-->首選項-->設置 然后搜索cssrem 設置Root Font Size為16即可

 到此這篇關(guān)于vue項目中使用rem替換px的實(shí)現示例的文章就介紹到這了,更多相關(guān)vue rem替換px內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。

  • 100倍故障賠償
  • 1天無(wú)理由退款
  • 7x24小時(shí)服務(wù)
  • 0元快速備案
  • 1V1專(zhuān)席秘書(shū)
日韩熟女精品一区二区三区| 大地资源二在线观看免费高清| 午夜DV内射一区二区| 中文字幕无码毛片免费看| 高潮videossex潮喷另类| 亚洲色欲久久久久综合网|