CSS3 rem入门

ゝ一纸荒年。 2021-06-26 16:06 418阅读 0赞

> Equal to the computed value of “font-size” on the root element

`rem`是`CSS3`新增的相对长度单位，是指相对于根元素`html`的`font-size`计算值的大小。简单可理解为屏幕宽度的百分比。  
![在这里插入图片描述][20190818235245585.png]`REM`浏览器支持情况

与`em`相同的是它们都是使用元素设定字体大小，不同的是`em`是根据父级元素设置大小。而`rem`在根据指定`html`根元素的字符大小而定的，从IE6到`Chrome`中，默认根元素的`font-size`都是`16px`的。如果想要设置`12px`的字体大小也就是`12px/16px = 0.75rem`。

*  由于`px`是相对固定单位，字号大写直接被定死，无法随着浏览器进行缩放。
 *  `em`和`rem`都是相对单位，`em`是相对于其父元素的`font-size`，页面层级越深，em换算越复杂，麻烦。
 *  `rem`直接相对于根元素`html`，避开层级关系，移动端新型浏览器对其支持较好。

![在这里插入图片描述][20190819231025606.png]  
单位转换

使用`em`可改变`HTML`的默认`font-size`，如果设置为`62.5%`，则表示将默认字体大小从`16px`修改为`10px`，即`10px / 16px = 62.5%`。

html{ 
      font-size:62.5%; 
    }

前端适配是为了让设计稿在大部分设备上得到一致性的展示

*  强制`meta viewport`宽度为设计稿宽度  
    问题是某些浏览器的`webview`中会出现兼容问题，且对于`1`像素会无法渲染。
 *  使用`rem`自适应布局  
    在背景和字体上存在某些问题

![在这里插入图片描述][20190819231349661.png]  
不同分辨率下的`font-size`

制作案例  
![在这里插入图片描述][20190819231512541.png]  
设计稿与制作稿

备注说明

*  设计稿尺寸为750x1180
 *  适配除了`iPadPro`上边距有些问题其他基本合格
 *  真机尚待测试

注意事项

*  `JS`代码在`CSS`之前加载
 *  换算方案使用`JS`后计算尺寸后，将对应的像素尺寸除以`100`得到`rem`单位。
 *  `CSS RESET`添加设置了`HTML`字体初始值和`Body`字体的初始值，已避免`JS`无法接在等问题。

页面结构

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

自适应脚本

/** * REM自适应 * designWidth 设计稿实际宽度 * maxWidth 制作稿的最大宽度 * */
    ;(function(designWidth, maxWidth){ 
        var docEle = document.documentElement;
        //设置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;
            }
        }
    
        //创建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设置好后执行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();
    
        //事件监听
        var timeID;
        window.addEventListener("resize", function(){ 
            clearTimeout(timeID);//防止执行两次
            timeID = setTimeout(refreshRem, 300);
        },false);
        window.addEventListener("pageshow", function(evt){ 
            //浏览器后退时重新计算
            if(evt.persisted){ 
                clearTimeout(timeID);
                timeID = setTimeout(refresh, 300);
            }
        },false);
    
        //事件监听
        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");
    }

[20190818235245585.png]: /images/20210626/a7d91e72e9ce4017b74ffffd65cbb052.png
[20190819231025606.png]: /images/20210626/d71cd24dc8a1462fb743d3e6b79dec48.png
[20190819231349661.png]: /images/20210626/cc626021c0ce4de697897792cdb32b02.png
[20190819231512541.png]: /images/20210626/77fcfd9a1bc642cbba700d77b170349d.png