html em 和 rem

時間 2019-11-09

標籤 html rem 欄目 HTML 简体版

原文原文鏈接

em和rem都是網頁排版的相對單位html

1、rem的特色web

一、rem的大小是根據html根目錄下的字體大小進行計算的。

二、當咱們改變根目錄下的字體大小的時候，下面字體都改變。

三、rem不只能夠設置字體的大小，也能夠設置元素寬、高等屬性。

2、em的特色app

二、em的大小是根據父元素的大小變化的，若是父元素沒有的話，會向上追溯。

下面主要是使用一段js代碼，實現rem佈局，這個方案是按照1rem = 100px的比例iphone

實現設計圖上寬爲50px，高60px的按鈕，，能夠用代碼這樣實現異步

.myBtn {
   width: 0.55rem;
   height: 0.37rem;
}

貼出代碼佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        !function(e){
            function t(a){
                if(i[a])return i[a].exports;
                var n=i[a]={exports:{},id:a,loaded:!1
                };
                return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports
            }
            var i={};
            return t.m=e,t.c=i,t.p="",t(0)
        }
        ([function(e,t){
            "use strict";
            Object.defineProperty(t,"__esModule",{value:!0});
            var i=window;
            t["default"]=i.flex=function(e,t){
                var a=e||100,n=t||1,r=i.document,
                    o=navigator.userAgent,
                    d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
                    l=o.match(/U3\/((\d+|\.){5,})/i),
                    c=l&&parseInt(l[1].split(".").join(""),10)>=80,
                    p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
                    s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);
                    var u=1/s,
                        m=r.querySelector('meta[name="viewport"]');
                    m||(m=r.createElement("meta"),
                        m.setAttribute("name","viewport"),
                        r.head.appendChild(m)),
                        m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),
                        r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
    flex(100, 1);
    </script>

    <!-- 字形圖標 -->
    <script src="https://use.fontawesome.com/f47f4563cb.js"></script>
</head>
<body>
<div class="box">
    <div style="width: 100%;height:0.88rem;background-color: #17acf6;text-align: center;line-height: 0.88rem;position: fixed;top:0;left: 0">
        <span style="font-size:0.3rem;color: #fff">項目詳情</span>
    </div>
    <!--<img src="http://temp.im/640x260/444/fff" class="img-responsive">-->
    <div style="width: 100%;height: 1rem;background-color: #fff;line-height: 1rem;padding-left: 0.39rem;margin-bottom: 0.15rem;margin-top: 0.88rem">
        <span style="font-size:0.25rem">項目名稱：某某某項目</span>
    </div>
    <div style="width: 100%;height: 4.2rem;background-color: #fff;padding: 0.39rem;margin-bottom: 0.15rem;">
        <p style="font-size:0.25rem;">甲方負責人</p>
        <p style="font-size: 0.34rem;font-weight: bold">張某某</p>
        <p style="font-size: 0.25rem;font-weight: bold">中國石油化工集團公司   董事長</p>
        <p style="font-size:0.25rem">性別：男</p>
        <p style="font-size:0.25rem">年齡：35歲</p>
        <p style="font-size:0.25rem">電話：19809090909</p>
        <p style="font-size:0.25rem">生日：3月12號</p>
    </div>
    <div style="width: 100%;height: 4.2rem;background-color: #fff;padding: 0.39rem;margin-bottom:0.15rem;">
        <div style="width: 100%;">
            <p style="font-size:0.25rem;float: left">最新進展</p>
            <p style="font-size:0.25rem;float: right">技術交流--客戶說下個月簽單</p>
        </div>
        <div style="width: 100%;clear: both">
            <p style="font-size:0.25rem;float: left">下一步計劃</p>
            <p style="font-size:0.25rem;float: right">技術交流--客戶說下個月簽單</p>
        </div>

    </div>
    <div class="navRoot">
        <a href="#" class="navLink active">
            <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
            <span class="navLinkText">首頁</span>
        </a>
        <a href="#" class="navLink">
            <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
            <span class="navLinkText">好店</span>
        </a>
        <a href="#" class="navLink">
            <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
            <span class="navLinkText">簡單</span>
        </a>
        <a href="#" class="navLink">
            <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
            <span class="navLinkText">複雜</span>
        </a>
        <!--<a href="#" class="navLink">-->
            <!--<i class="fa fa-home navLinkIco" aria-hidden="true"></i>-->
            <!--<span class="navLinkText">異步</span>-->
        <!--</a>-->
    </div>
</div>
</body>
<style>
    * {
        box-sizing: border-box;
        /* 在X5新內核Blink中，在排版頁面的時候，會主動對字體進行放大，會檢測頁面中的主字體，當某一塊字體在咱們的斷定規則中，認爲字號較小，而且是頁面中的主要字體，就會採起主動放大的操做。然而這不是咱們想要的，能夠採起給最大高度解決 */
        max-height: 100000px;
        /*background-color: #eee;*/
    }

    *:before, *:after {
        box-sizing: border-box;
        max-height: 100000px;
    }

    *, *:before, *:after {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,textarea, td {
        border: 0 none;
        font-size: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
        line-height: 2.0;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    em, strong {
        font-style: normal;
    }

    ul, ol, li {
        list-style: none;
    }

    body {
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
        line-height: 1.5;
        color: #333;
        background-color: #f2f2f2;
        font-size: 0.24rem;
    }

    a {
        text-decoration: none;
    }
    .box {
        position: relative;
        max-width: 10rem;
        margin: 0 auto;
    }
    .navRoot {
        position: fixed;
        z-index: 50;
        bottom: 0;
        left:0;
        width: 100%;
        height: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-top: 0.01rem solid #ccc;
        background:#f2f2f2;
    }

    .navLink {
        font-size: 0.42rem;
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        line-height: 1;
        color: #666;
    }
    .navLink.active {
        color: #1abc9c
    }
    .navLinkIco {
        display: block;
        margin-bottom: 0.1rem;
    }

    .navLinkText {
        display: block;
        line-height: 1;
        font-size: 0.24rem;
    }

    .img-responsive {
        width: 100%;
    }
</style>
</html>