rem適配所有螢幕大小demo分享

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

前兩天學習了rem的使用，下面是一個小demo，使頁面能夠根據螢幕大小自行增大和縮小，利用的就是rem的等比縮放~~~發現錯誤請告訴我，謝謝

方案一：

利用css的calc函式對html元素的font-size大小進行計算，100vw是viewport視區的寬度（即瀏覽器內部的可視區域大小，window.innerWidth），然後可以自己設定一個全寬為多少，意味著將螢幕幾等分，例如將螢幕10等分，那麼1rem = 100vw / 10，這也就是根元素的font-size值，此時如果你的設計稿為750，你就可以得出一個計算設計稿中某個區域寬高的rem值的公式：width / 750 * 10rem

，這樣的話根元素font-size值就可以自動根據裝置進行變化。

方案二：

其實就是按照方案一的演算法，把一些螢幕大小範圍設定一個指定的font-size~~~

方案三：

當螢幕小於一個最小值，給根元素font-size設定一個定值，當螢幕大於一個最大值，給根元素font-size設定一個定值；最大和最小之間，等比例增加font-size,每一份所佔font-size為：
(max-fontsize - min-fontsize) / (max-screen - min-screen)

程式碼：

<!DOCTYPE html>
<html 
 lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
    <style>
        .demo{
            width:2rem;
            height:2rem;
            position 
:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            padding:0.1rem;
            box-shadow:inset 0px 0px 0.2rem 0.01rem #1db11d;
            font-size:0.4rem;
            color:red;
            font-family: "arial";
        }
        @media screen and (min-width: 240px) and (max-width:1500px){
            html{
                font-size:calc(100vw/10); /* 將螢幕10等分 */
            }
        }
        @media screen and (min-width: 1500px){
            html{
                font-size:200px;
            }
        }
        /*
        方案二:
        @media screen and (min-width: 240px) {html{font-size:32px;}}
        @media screen and (min-width: 320px) {html{font-size:42.66px;}}
        @media screen and (min-width: 360px) {html{font-size:48px;}}
        @media screen and (min-width: 375px) {html{font-size:50px;}}
        @media screen and (min-width: 400px) {html{font-size:53.33px;}}
        @media screen and (min-width: 414px) {html{font-size:55.2px;}}
        @media screen and (min-width: 440px) {html{font-size:58.66px;}}
        @media screen and (min-width: 480px) {html{font-size:64px;}}
        @media screen and (min-width: 520px) {html{font-size:69.33px;}}
        @media screen and (min-width: 560px) {html{font-size:74.66px;}}
        @media screen and (min-width: 600px) {html{font-size:80px;}}
        @media screen and (min-width: 640px) {html{font-size:85.33px;}}
        @media screen and (min-width: 680px) {html{font-size:90.66px;}}
        @media screen and (min-width: 720px) {html{font-size:96px;}}
        @media screen and (min-width: 760px) {html{font-size:101.33px;}}
        @media screen and (min-width: 800px) {html{font-size:106.66px;}}
        @media screen and (min-width: 960px) {html{font-size:128px;}}
        */
        /*
         方案三
        html{
            font-size:50px
        }
        @media screen and (min-width: 400px) and (max-width: 960px){
            html{font-size:calc( ( 78 / 560 ) * ( 100vw - 400px ) + 50px );}
        }
        @media screen and (min-width: 960px){
            html{font-size:128px;}
        }
        */
    </style>
</head>
<body>
    <div class="demo">
        hello,這裡是rem demo!
    </div>

</body>
</html>

rem適配所有螢幕大小demo分享

方案一：

方案二：

方案三：

程式碼：

rem適配所有螢幕大小demo分享

一步步教你使用rem適配不同螢幕的移動裝置

js讓你的rem彈性佈局適配所有解析度(含豎屏適配)

關於適配所有移動端螢幕且到固定寬度時居中的寫法

在使用rem適配移動端時，如何改變根元素的字型大小？

一種利用百分比佈局適配所有android手機螢幕解析度的方法

iOS開發-iPhoneX的適配-iPhoneX螢幕適配分享

移動APP中rem適配

SLF4J - 借助SLF4J, 統一適配所有日誌實現為logback日誌實現的實踐

移動端適配（3）---rem適配

移動端rem適配 flex.js

手機H5頁面（文字滾動、適配各種螢幕、jQuery ajax包含cookie）

rem適配750

Cordova 小米8留海螢幕適配之沉狀態列與適配大螢幕手機從開始到結束總結

移動端rem適配程式碼

MetaHandler.js：移動端適配各種螢幕

H5 頁面適配所有 iPhone 和安卓機型的六個技巧

移動端rem適配，以及要注意的問題

移動端REM適配的幾種方法

rem適配移動端—動態改變html的px值

rem適配所有螢幕大小demo分享

方案一：

方案二：

方案三：

程式碼：

相關推薦