2. 程式人生 > >REM自適應JS（px自動轉化為rem）

REM自適應JS（px自動轉化為rem）

阿新 • • 發佈：2018-12-23

前文介紹了rem，在這裡介紹兩種實際使用rem的例子;

flexible.js可伸縮佈局使用

兩種方式的優劣：
1、第一種方式使用上更為簡單，第二種需要把樣式檔案從scss 轉為css檔案比較麻煩;
2、第一種只能px轉為rem,第二種在這一功能上，也提供出了rem轉化px的功能
3、第二種需要將scss編譯成css 再修改和編寫 不如第一張方便

flexible.js 原始碼

//designWidth:設計稿的實際寬度值，需要根據實際設定
//maxWidth:製作稿的最大寬度值，需要根據實際設定
//這段js的最後面有兩個引數記得要設定，一個為設計稿實際寬度，一個為製作稿最大寬度，例如設計稿為750，最大寬度為750，則為(750,750)
 

;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;
    //瀏覽器豎屏與橫屏轉換的BUG。
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540
 
;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div"
 
);
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 設定好後才能執行 refreshRem，不然 refreshRem 會執行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止執行兩次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 瀏覽器後退的時候重新計算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

flexible.js 使用方法：

1.複製上面這段程式碼到你的頁面的頭部的script標籤的最前面。

2.根據設計稿大小，調整裡面的最後兩個引數值。

3.使用1rem=100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px*300px,換算成rem則為1rem*3rem。

也可以到我的Github上下載這個專案裡的壓縮程式碼flexible.min.js

該程式碼版本區別於手淘的rem換算方法。使用的是1rem=100px的換算。

假如你有一個塊是.box{width:120px;height:80px;} 轉為rem則為.box{width:1.2rem; height:.8rem;}

flexible.js 使用demo

基本的html模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超過150個字元"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>前端開發部落格</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
//引入該flexible.min.js
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
</head>

<body>
    <!-- 正文 -->
</body>
</html>

base.css（基本樣式可以自定義）

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:14px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

再次強調一下：

需要根據你的設計稿的大小來調整指令碼最後的兩個引數。

})(750, 750);
第一個引數是設計稿的寬度，一般設計稿有640，或者是750，你可以根據實際調整
第二個引數則是設定製作稿的最大寬度，超過750，則以750為最大限制。
如果你發現有什麼BUG，也歡迎給我提Issue。

hotcss(大神原文很詳細全部複製了)

讓移動端佈局開發更加容易
點選這裡一鍵加群(130977811)，溝通更便捷

介紹

hotcss不是一個庫，也不是一個框架。它是一個移動端佈局開發解決方案。使用hotcss可以讓移動端佈局開發更容易。

使用動態的HTML根字型大小和動態的viewport scale。

遵循視覺一致性原則。在不同大小的螢幕和不同的裝置畫素密度下，讓你的頁面看起來是一樣的。

不僅便捷了你的佈局，同時它使用起來異常簡單。可能你會說 talk is cheap,show me the code，那我現在列下hotcss整個專案的目錄結構。

熊貓TV
美麗說HIGO
奇虎360
爆米兔
一起作業
TalkingData
電兔貸款
新浪show
優勢

保證不同裝置下的統一視覺體驗。
不需要你再手動設定viewport，根據當前環境計算出最適合的viewport。
支援任意尺寸的設計圖，不侷限於特定尺寸的設計圖。
支援單一專案，多種設計圖尺寸，專為解決大型，長週期專案。
提供px2rem轉換方法，CSS佈局，零成本轉換，原始值不丟失。
有效解決移動端真實1畫素問題。
用法

引入hotcss.js

根據頁面渲染機制，hotcss.js必須在其他JS載入前載入，萬不可非同步載入。

如果可以，你應將hotcss.js的內容以內嵌的方式寫到標籤裡面進行載入，並且保證在其他js檔案之前。

為了避免不必要的bug，請將CSS放到該JS之前載入。

css要怎麼寫

你可能已經注意到在src/目錄下有px2rem.scss/px2rem.less/px2rem.styl三個檔案。沒錯，這就是hotcss提供的將px轉為rem的方法，可根據您的需要選擇使用。

推薦使用scss來編寫css，在scss檔案的頭部使用import將px2rem匯入（kala免費開源軟體，可將scss檔案編譯成scss）

@import ‘/path/to/px2rem.scss’;
如果你的專案是單一尺寸設計圖，那麼你需要去px2rem.scss中定義全域性的designWidth。

@function px2rem( px)@return$px∗320/$designWidth/20+rem;designWidth : 750; //如設計圖是750
如果你的專案是多尺寸設計圖，那麼就不能定義全域性的designWidth了。需要在你的業務scss中單獨定義。如以下是style.scss

@import ‘/path/to/px2rem.scss’;
designWidth:750;//如設計圖是750designWidth必須要在使用px2rem前定義。否則scss編譯會出錯。

注意：如果使用less，則需要引入less-plugin-functions，普通的less編譯工具無法正常編譯。

想用px怎麼辦？

直接寫px肯定是不能適配的，那hotcss.js會在html上註冊data-dpr屬性，這個屬性用來標識當前環境dpr值。那麼要使用px可以這麼寫。

//scss寫法

container{

font-size: 12px ;
[data-dpr="2"] &{
    font-size: 24px;
}
[data-dpr="3"] &{
    font-size: 36px;
}

}
介面說明

initial-dpr

可以通過強制設定dpr。來關閉響應的viewport scale。使得viewport scale始終為固定值。


max-width

通過設定該值來優化平板/PC訪問體驗，注意該值預設值為540。設定為0則該功能關閉。 為了配合使用該設定，請給body增加樣式width:16rem;margin:0 auto;。

預設為540，可根據具體需求自己定義

body{
width: 16rem;
margin: 0 auto;
}

design-width

通過對design-width的設定可以在本頁執行的JS中直接使用hotcss.px2rem/hotcss.rem2px方法，無需再傳遞第二個值。

<meta name="hotcss" content="design-width=750">
<script src="/path/to/hotcss.js"></script>

hotcss.mresize

用於重新計算佈局，一般不需要你手動呼叫。

hotcss.mresize();
hotcss.callback

觸發mresize的時候會執行該方法。

hotcss.callback = function(){
  //your code here
}

單位轉換hotcss.px2rem/hotcss.rem2px

hotcss.px2rem 和 hotcss.rem2px。你可以預先設定hotcss.designWidth可以在meta中設定design-width，則之後使用這兩個方法不需要再傳遞第二個引數。

迭代後仍然支援在js中設定hotcss.designWidth，推薦使用meta去設定。

/**
* [px2rem px值轉換為rem值]
* @param  {[number]} px          [需要轉換的值]
* @param  {[number]} designWidth [設計圖的寬度尺寸]
* @return {[number]}             [返回轉換後的結果]
*/
hotcss.px2rem( px , designWidth );

/**
* 同上。
* 注意：因為rem可能為小數，轉換後的px值有可能不是整數，需要自己手動處理。
*/
hotcss.rem2px( rem , designWidth );

//你可以在meta中定義design-width，此後使用px2rem/rem2px，就不需要傳遞designWidth值了。同時也支援舊的設定方式，直接在JS中設定hotcss.designWidth
hotcss.px2rem(200);
hotcss.rem2px(350);
輔助開發資源

hotcss Sulime text 程式碼片段 – 感謝dctxf提供
hotcss Sublime text 程式碼片段增強版 – 感謝lhard66提供
koala<中文，免費>
codekit<功能豐富，收費>

hotcss 使用demo

本人修改後的hotcss.js

(function( window , document ){
    'use strict';
    //給hotcss開闢個名稱空間，別問我為什麼，我要給你準備你會用到的方法，免得用到的時候還要自己寫。
    var hotcss = {};
    (function() {
        //根據devicePixelRatio自定計算scale
        //可以有效解決移動端1px這個世紀難題。
        var viewportEl = document.querySelector('meta[name="viewport"]'),
            hotcssEl = document.querySelector('meta[name="hotcss"]'),
            dpr = window.devicePixelRatio || 1,
            maxWidth = 1920,
            minWidth = null,
            designWidth = 0;

        dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );

        //允許通過自定義name為hotcss的meta頭，通過initial-dpr來強制定義頁面縮放
        if (hotcssEl) {
            var hotcssCon = hotcssEl.getAttribute('content');
            if (hotcssCon) {
                var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
                if (initialDprMatch) {
                    dpr = parseFloat(initialDprMatch[1]);
                }
                var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
                if (maxWidthMatch) {
                    maxWidth = parseFloat(maxWidthMatch[1]);
                }
                var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
                if (designWidthMatch) {
                    designWidth = parseFloat(designWidthMatch[1]);
                }
                minWidth = hotcssCon.match(/min\-width=([\d\.]+)/);
                if (minWidth) {
                    minWidth = parseFloat(minWidth[1]);
                }
            }
        }


        document.documentElement.setAttribute('data-dpr', dpr);
        hotcss.dpr = dpr;

        document.documentElement.setAttribute('max-width', maxWidth);
        hotcss.maxWidth = maxWidth;

        if( designWidth ){
            document.documentElement.setAttribute('design-width', designWidth);
            hotcss.designWidth = designWidth;
        }
        if(minWidth){
            document.documentElement.setAttribute('min-width',minWidth);
            hotcss.minWidth = minWidth;
        }

        var scale = 1 / dpr,
            content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';

        if (viewportEl) {
            viewportEl.setAttribute('content', content);
        } else {
            viewportEl = document.createElement('meta');
            viewportEl.setAttribute('name', 'viewport');
            viewportEl.setAttribute('content', content);
            document.head.appendChild(viewportEl);
        }

    })();

    hotcss.px2rem = function( px , designWidth ){
        //預判你將會在JS中用到尺寸，特提供一個方法助你在JS中將px轉為rem。就是這麼貼心。
        if( !designWidth ){
            //如果你在JS中大量用到此方法，建議直接定義 hotcss.designWidth 來定義設計圖尺寸;
            //否則可以在第二個引數告訴我你的設計圖是多大。
            designWidth = parseInt(hotcss.designWidth , 10);
        }

        return parseInt(px,10)*320/designWidth/20;
    }

    hotcss.rem2px = function( rem , designWidth ){
        //新增一個rem2px的方法。用法和px2rem一致。
        if( !designWidth ){
            designWidth = parseInt(hotcss.designWidth , 10);
        }
        //rem可能為小數，這裡不再做處理了
        return rem*20*designWidth/320;
    }

    hotcss.mresize = function(){


        //對，這個就是核心方法了，給HTML設定font-size。
        var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;

        //檢測是否有最小寬度設定 判斷當前縮放如果小於最小寬度  就按最小寬度渲染  設定body 的最小寬度
        if(innerWidth/hotcss.dpr<hotcss.minWidth){
            innerWidth = hotcss.minWidth*hotcss.dpr;

        }
        if( hotcss.maxWidth && (innerWidth/hotcss.dpr > hotcss.maxWidth) ){
            innerWidth = hotcss.maxWidth*hotcss.dpr;
        }

        if( !innerWidth ){ return false;}

        document.documentElement.style.fontSize = ( innerWidth*20/320 ) + 'px';

        hotcss.callback && hotcss.callback();

    };

    hotcss.mresize(); 
    //直接呼叫一次

    window.addEventListener( 'resize' , function(){

        clearTimeout( hotcss.tid );
        hotcss.tid = setTimeout( hotcss.mresize , 33 );
    } , false ); 
    //繫結resize的時候呼叫

    window.addEventListener( 'load' , hotcss.mresize , false ); 
    //防止不明原因的bug。load之後再呼叫一次。
    setTimeout(function(){
        hotcss.mresize(); 
        //防止某些機型怪異現象，非同步再呼叫一次
    },333)

    window.hotcss = hotcss; 
    //名稱空間暴露給你，控制權交給你，想怎麼調怎麼調。

})( window , document );

html 模板

<!DOCTYPE html>
<html  xmlns:svg="http://www.w3.org/2000/svg">
    <head>
        <meta name="content-type" content="text/html" charset="UTF-8">
        <meta name=renderer content=webkit>
        //這裡注意設定了  max-width 最大尺寸 和  design-width設計尺寸 min-width(我對原始碼有所改動  低於1170的不再縮放)
        <meta name="hotcss" content="design-width=1920;max-width=1920;min-width=1170;">
        <title>系統登入</title>
        <link rel="stylesheet" type="text/css" href="../../lib/layui2.2.45/css/layui.css" />
        //login-zxb.css 是 scss檔案編譯後生成的
        <link rel="stylesheet" type="text/css" href="../../public/css/login/login_zsb.css" />
        //映入hotcss.js
        <script type="text/javascript" src="../../public/js/hotcss.js"></script>
        <!--引入jquery cookie-->
        <script type="text/javascript" src="../../lib/jquery/jquery-1.12.4.min.js"></script>
        <!--引入jquery cookie-->
        <script type="text/javascript" src="../../lib/jquery/jquery.cookie.js"></script>
        <!--引入layui-->
        <script type="text/javascript" src="../../lib/layui2.2.45/layui.js"></script>

        <script type="text/javascript" src="../../lib/layui2.2.45/layui-plus0.1.js"></script>

        <script type="text/javascript" src="../../public/js/commonUtil.js"></script>

        <script type="text/javascript" src="../../public/js/md5.js"></script>

    </head>
    <body>
    </body>
    <script type="text/javascript" src="login.js"></script>
</html>

login_zsb.scss

//匯入px2rem.scss
@import 'px2rem.scss';
//設定 設計稿尺寸
$designWidth: 1920;
html,body{
                width: 100%;
                height: 100%;
                min-width: 1366px;
                margin: 0px auto;
                font-size: px2rem(10);
                padding: 0px auto;
                background-image: url(../../../public/images/login/bj.png);
                background-repeat:no-repeat; 
                background-size:100% 100%;
                -moz-background-size:100% 100%;
            }
            .form-container-div{
                width: 100%;
                min-height: px2rem(500);
                display: flex;
                align-items: center;
            }
            .logo-image-div{
                width: px2rem(500);
                height: px2rem(80);
                margin-left:px2rem(326);
                align-self: 
                flex-end;overflow: hidden;
            }
            .logo-image{
                width: px2rem(500);
                height: px2rem(80);
                max-width: px2rem(500);
                max-height: px2rem(80);
                transform: scale(6);
            }
            .zhutu-image-div{
                width: 100%;
                margin-left: px2rem(380);
                max-width: px2rem(700);
                min-height: px2rem(500);
            }
            .zhutu-image{
                width: px2rem(700);
                height: px2rem(500);
            }

           .chaxun-image{
                width: px2rem(24);
                height: px2rem(24);
                margin-top: px2rem(13);
            }

            .form-container{
                    width: 100%;
                    max-width: px2rem(473);
                    height:  px2rem(400);
                    max-height:  px2rem(400);
                    display: flex;
                    background: #ffffff;
                    flex-direction: column;
            }
            .form-container .title-span{
                width: 100%;
                height:  px2rem(50);
                line-height: px2rem(50);
                display: inline-block;
                background: #27384a;
                font-size: px2rem(18);
                color: #FFFFFF;
                text-align: center;
            }

            .form-container-titleDiv{
                width: 100%;
                height: px2rem(50);
            }
            .form-container-conDiv{
                width: 100%;
                height:  px2rem(350);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .form-container-conDiv .layui-form{
                width: 100%;
                max-width: px2rem(400);
                align-items: center;
            }
            .form-input-div{
                width: 100%;
                height: px2rem(50);
                display: flex;
                border: 1px solid #e6e6e6;
            }
            .form-input-icon{
                width:px2rem(54) !important;
                
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
REM自適應JS（px自動轉化為rem）

     
 
							
							
							前文介紹了rem，在這裡介紹兩種實際使用rem的例子;

flexible.js可伸縮佈局使用



兩種方式的優劣： 
1、第一種方式使用上更為簡單，第二種需要把樣式檔案從scss 轉為css檔案比較麻煩; 
2、第一種只能px轉為rem,第二種在這一功能上， 



  
 

    


    
    
REM佈局，自適應移動端JS分享(px自動轉化為rem)

     
 
                !new function(){var a=this;a.width=750,a.fontSize=100,a.widthProportion=function(){var b=(document.body&&document.body.clientWidth 



  
 

    


    
    
vue-cli + lib-flexible + px2rem實現px自動轉化為rem

     
  
 
 原文地址：http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/
 安裝 lib-flexible 



  
 

    


    
    
Rem自適應js之精簡版flexible.js

     
  
 
 //designWidth:設計稿的實際寬度值，需要根據實際設定
//maxWidth:製作稿的最大寬度值，需要根據實際設定
//這段js的最後面有兩個引數記得要設定，一個為設計稿實際寬度，一個為製作稿最大寬度，例如設計稿為750，最大寬度為750，則為(750,750)
;(function(de 



  
 

    


    
    
rem自適應js

     
 
                /*
* 處理字型響應式
* **/
(function (w) {
    //獲取文件
    var doc = w.document;
    var docuEle = doc.documentElement;
    refreshRem();
    funct 



  
 

    


    
    
Java之浮點四則運算工具類-（double/float轉化為BigDecimal）

     
 
                
package zmx.util;
import java.math.BigDecimal;
public class ArithUtil {
 // 原始檔Arith.java：
 /**
  * 由於Java的簡單型別不能夠精確的對浮點數進行運算，這個工具類提供精 確的 



  
 

    


    
    
rem自適應布局（轉）

     
 寬度   rst   同學   con   版本   無法   client   -h   else   原文鏈接：http://caibaojian.com/web-app-rem.html
rem是什麽？
rem（font size of the root element）是指相對於根元素的字體大小的單位 



  
 

    


    
    
px轉換rem自適應移動端螢幕

     
  
 
 var fun = function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize 



  
 

    


    
    
Vue:將px轉化為rem，適配移動端vant-UI等框架（px2rem-loader）

     
 轉載：https://www.cnblogs.com/WQLong/p/7798822.html 
1.下載lib-flexible 
使用的是vue-cli+webpack，通過npm來安裝的 
 
 npm i lib-flexible --save 
 
2.引入lib-flexible 
在main. 



  
 

    


    
    
rem自適應 窗體大小自動 rem設定 改變rem來完成等比例縮放

     
 
								
								            
							
							
							  <body onresize="phoneResize()" onload="phoneResize()">
  當視窗大小發生改變時
  </body>



  // 設 



  
 

    


    
    
css之px自動轉rem

     
 
								
								            
						
                

1.CSS處理器

Sass、LESS以及PostCSS這樣的處理器都可以處理。

@function px2rem($px, $base-font-size: 75px) {
  @return  



  
 

    


    
    
px自動轉rem的外掛  適用於sublime

     
 
                
px自動轉rem的外掛  適用於sublime
因為電腦有裝sublimetext，所以這次就介紹適用於sublime的px自動轉rem的外掛。

下面我介紹一下，如何配置：
1. 我們可以在GitHub上下載所依賴的檔案；
https://github.com/flash 



  
 

    


    
    
Vue-cli 將px轉化為rem，適配移動端（vue-cli2.x 和 vue-cli3中的使用）

     
 
                一. Vue-cli2.x中的用法

1.下載lib-flexible

我使用的是vue-cli+webpack，所以是通過npm來安裝的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexib 



  
 

    


    
    
css中新增螢幕自適應方法（rem）

     
 css中新增螢幕自適應方法（rem） 
只需要在公共css檔案中新增下面程式碼：設計稿以750px，基礎字型為20px為例，相容性高，使用過程中px轉化為rem即可 
 
 /*豎屏*/
@media screen and (max-aspect-ratio: 13/9){
    html {font-si 



  
 

    


    
    
px2rem-loader（Vue:將px轉化為rem，適配移動端）

     
  
 
 轉載：https://www.cnblogs.com/WQLong/p/7798822.html 
 1.下載lib-flexible 
 使用的是vue-cli+webpack，通過npm來安裝的 
 npm i lib-flexible --save 
 2.引入lib-flexible 
 在 



  
 

    


    
    
vue.js將px轉化為rem

     
 
                1.下載lib-flexible

我使用的是vue-cli+webpack，所以是通過npm來安裝的

npm i lib-flexible --save


2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-fl 



  
 

    


    
    
rem自適應佈局-移動端自適應必備:flexible.js

     
 
							
							
							由於移動端特殊性，本文講的是如何使用rem實現自適應，或叫rem響應式佈局，通過使用一個指令碼就可以rem自適應，不用再為各種裝置寬度不同而煩惱如何實現自適應的問題。

rem是相對於根元素，這樣就意味著，我們只需要在根元素確定一個px字號，則可以來算出元素的寬 



  
 

    


    
    
自適應PC端網頁制作使用REM

     
 一次   常見   上下左右   以及   body   效果   上下   boot   ott   做一個PC端的網頁,設計圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080
使用了幾種辦法
1.內容在一屏內顯示的, 



  
 

    


    
    
rem自適應布局

     
 page   maxwidth   read   div   等於   sheet   還要   精簡版   就是   rem自適應原理
rem是根據html的font-size大小來變化，正是基於這個出發，我們可以在每一個設備下根據設備的寬度設置對應的html字號，從而實現了自適應布局。更多介紹請看這篇文章 



  
 

    


    
    
rem自適應

     
 ()   func   event   ont   自適應   dde   false   cli   class   
//REM自適應
_resize();
window.addEventListener(‘resize‘, _resize, false);
function _resize() {
va