REM

Equal to the computed value of "font-size" on the root element

rem是CSS3新增的相對(duì)長度單位，是指相對(duì)于根元素html的font-size計(jì)算值的大小。簡單可理解為屏幕寬度的百分比。

REM瀏覽器支持情況

與em相同的是它們都是使用元素設(shè)定字體大小，不同的是em是根據(jù)父級(jí)元素設(shè)置大小。而rem在根據(jù)指定html根元素的字符大小而定的，從IE6到Chrome中，默認(rèn)根元素的font-size都是16px的。如果想要設(shè)置12px的字體大小也就是12px/16px = 0.75rem。

  • 由于px是相對(duì)固定單位，字號(hào)大寫直接被定死，無法隨著瀏覽器進(jìn)行縮放。
  • em和rem都是相對(duì)單位，em是相對(duì)于其父元素的font-size，頁面層級(jí)越深，em換算越復(fù)雜，麻煩。
  • rem直接相對(duì)于根元素html，避開層級(jí)關(guān)系，移動(dòng)端新型瀏覽器對(duì)其支持較好。
單位轉(zhuǎn)換

使用em可改變HTML的默認(rèn)font-size，如果設(shè)置為62.5%，則表示將默認(rèn)字體大小從16px修改為10px，即10px / 16px = 62.5%。

html{
  font-size:62.5%; 
}

前端適配是為了讓設(shè)計(jì)稿在大部分設(shè)備上得到一致性的展示

  • 強(qiáng)制meta viewport寬度為設(shè)計(jì)稿寬度
    問題是某些瀏覽器的webview中會(huì)出現(xiàn)兼容問題，且對(duì)于1像素會(huì)無法渲染。

  • 使用rem自適應(yīng)布局
    在背景和字體上存在某些問題

不同分辨率下的font-size

制作案例

設(shè)計(jì)稿與制作稿

備注說明

  • 設(shè)計(jì)稿尺寸為750x1180
  • 適配除了iPadPro上邊距有些問題其他基本合格
  • 真機(jī)尚待測試

注意事項(xiàng)

  • JS代碼在CSS之前加載
  • 換算方案使用JS后計(jì)算尺寸后，將對(duì)應(yīng)的像素尺寸除以100得到rem單位。
  • CSS RESET添加設(shè)置了HTML字體初始值和Body字體的初始值，已避免JS無法接在等問題。

頁面結(jié)構(gòu)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title>room</title>
    <script></script>
    <style></style>
</head>
<body>
    <div class="fixed-top bg bg-main"></div>
    <div class="contianer">
        <div class="bg title member"></div>
        <div class="userlist">
            <div class="useritem">
                <img src="./assets/img/room/avatar.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/avatar.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/avatar.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/avatar.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/avatar.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/avatar.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/nopic.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
            <div class="useritem">
                <img src="./assets/img/room/nopic.png" class="avatar"/>
                <p>玩家昵稱</p>
            </div>
        </div>
        <div class="bg title info"></div>
        <div class="bg match"></div>
        <div class="fixed-bottom">
            <a href="javascript:;" class="bg btn-join" id="join">加入游戲</a>
            <a href="javascript:;" class="bg btn-download" id="download">下載游戲</a>
        </div>
    </div>
</body>
</html>

自適應(yīng)腳本

/**
 * REM自適應(yīng)
 * designWidth 設(shè)計(jì)稿實(shí)際寬度
 * maxWidth 制作稿的最大寬度
 * */
;(function(designWidth, maxWidth){
    var docEle = document.documentElement;
    //設(shè)置viewport
    var meta;
    var viewportContent = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";//viewport-fit=cover用于適配iphoneX
    meta = document.querySelector("meta[name=viewport]");
    if(meta){
        meta.setAttribute("content", viewportContent);
    }else{
        meta = document.createElement("meta");
        meta.setAttribute("name","viewport");
        meta.setAttribute("content", viewportContent);
        if(docEle.firstElementChild){
            docEle.firstElementChild.appendChild(meta);
        }else{
            var div = document.createElement("div");
            div.appendChild(meta);
            document.write(div.innerHTML);
            div = null;
        }
    }

    //創(chuàng)建REM樣式
    var styleEle = document.createElement("style");
    if(docEle.firstElementChild){
        docEle.firstElementChild.appendChild(styleEle);
    }else{
        var div = document.createElement("div");
        div.appendChild(styleEle);
        document.write(div.innerHTML);
        div = null;
    }

    //等待viewport設(shè)置好后執(zhí)行refreshRem
    var refreshRem = function(){
        var width = docEle.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;//限制在540的屏幕下，這樣100%就跟10rem不一樣了
        width > maxWidth && (width = maxWidth);

        var rem = width * 100 / designWidth;
        styleEle.innerHTML = "html{font-size:"+rem+"px !important;}";
    };
    refreshRem();

    //事件監(jiān)聽
    var timeID;
    window.addEventListener("resize", function(){
        clearTimeout(timeID);//防止執(zhí)行兩次
        timeID = setTimeout(refreshRem, 300);
    },false);
    window.addEventListener("pageshow", function(evt){
        //瀏覽器后退時(shí)重新計(jì)算
        if(evt.persisted){
            clearTimeout(timeID);
            timeID = setTimeout(refresh, 300);
        }
    },false);

    //事件監(jiān)聽
    var defaultFontSize = "16px";
    if(document.readState === "complete"){
        document.body.style.fontSize = defaultFontSize;
    }else{
        document.addEventListener("DOMContentLoaded", function(evt){
            document.body.style.fontSize = defaultFontSize;
        }, false);
    }
})(720, 750);

重置樣式

/*reset 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;font-size:50px;}
body{line-height:1.5;font-size:16px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,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;max-width:100%;vertical-align:top;}
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;}
@media screen and (-webkit-min-device-pixel-ratio:0){
    input{line-height:normal!important;}
}
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;}

頁面樣式

/*page css*/
body{
    background-color:#6A3B27;
}
.fixed-top{
    position:fixed;
    top:0;
    left:0;
    z-index:-10;
    zoom:1;
}
.bg{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 0; 
}
.bg-main{
    width:100%;
    min-width:7.2rem;
    height:100%;
    max-height:11.8rem;
    overflow:hidden;
    background-image:url("./assets/img/room/bg.jpg");
}
.fixed-bottom{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:20;
}
.fixed-bottom>a{
    width: 50%;
    height:100%;
    min-height:1.1rem;
    line-height: 1.1rem;
    overflow:hidden;
    cursor:pointer;
    display:block;
    text-indent:-99rem;
    text-align:center;
    float: left;
}
.fixed-bottom>.bg.btn-download{
    background-image:url("./assets/img/room/download.png");
}
.fixed-bottom>.bg.btn-join{
    background-image:url("./assets/img/room/join.png");
}
.title{
    position:absolute;
    width:3.54rem;
    height:0.67rem;
    left: 50%;
    margin-left:-1.77rem;
    z-index:10;
}
.title.member{
    top:2.42rem;
    background-image:url("./assets/img/room/room_member.png");
}
.title.info{
    top:6.98rem;
    background-image:url("./assets/img/room/room_info.png");
}
.userlist{
    z-index:10;
    position:absolute;
    top: 3.25rem;
    width:6.4rem;
    left: 50%;
    margin-left:-3.2rem;
    display:block;
}
.userlist .useritem{
    width:1.6rem;
    float:left;    
    text-align: center;
}
.userlist .useritem p{
    color:#EEDF9C;
    margin:0 auto;
    text-align:center;
    font-size:0.22rem;
}
.userlist .useritem .avatar{
    width:1.37rem;
    margin: 0 auto;
}
.match{
    z-index: 10;
    position: absolute;
    top: 7.74rem;
    height: 2.77rem;
    width: 6.42rem;
    left:50%;
    margin-left:-3.21rem;
    background-image:url("./assets/img/room/room_table.png");
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容