自從使用了rem的適配方案之后，已經(jīng)徹底的忘記其他的適配了。但是今天在主站中做一個(gè)彈窗UI，由于主站之前沒(méi)用rem適配，所以只能使用百分比加媒體查詢做適配了。在使用的過(guò)程中偶爾明白了以前一直沒(méi)有了解的一些問(wèn)題，記錄一下，頁(yè)面可以根據(jù)窗口的大小自適應(yīng)縮放，這個(gè)demo鏈接。

1、元素的寬度使用了百分比來(lái)定寬，這樣就可以根據(jù)屏幕的寬度來(lái)自適應(yīng)了。這個(gè)方式要注意百分比的參考的基準(zhǔn)。使用百分比定寬的元素，百分比參考的是該元素最近的、定了寬度的、父元素。

    <div class="m-lucky-number-dialog">
        <h3>恭喜你獲得一張618的幸運(yùn)號(hào)！</h3>
        <p class="number">452124</p>
        <p class="tip-text"><span>6.18當(dāng)日憑此幸運(yùn)號(hào)兌獎(jiǎng)</span><i>，</i><span>中獎(jiǎng)信息將短信提醒哦~</span></p>
        <div class="no-phone-number">
            <input type="text" placeholder="中獎(jiǎng)信息不容錯(cuò)過(guò)，趕快填寫吧">
            <a class="d-btn save-phone-number">保存手機(jī)號(hào)</a>
            <a  target="_blank" class="go-index">幸運(yùn)號(hào)是什么？</a>
        </div>
        <a class="close-btn"></a>
    </div>

Paste_Image.png

2、字體大小font-size的參考值
由于我們的字體大小使用的是em為字體單位，所以必須要有一個(gè)參考值。其實(shí)em跟百分比的寬度參考規(guī)則一樣，如果父元素沒(méi)有設(shè)置font-size,那么它的參考對(duì)象就會(huì)一直往上冒泡，直到body，也就是參考的是該元素最近的，定了font-size的、父元素。元素最終字體大小是　該元素的字體大小 * 所參考的父元素的字體大小
比如我給最外層父元素.m-lucky-number-dialog設(shè)置了font-size:10px;,那么它里面的所有元素的字體大小都會(huì)參考它，比如我的綠色的按鈕.d-btn

.d-btn {
        width: 77.8%;
        height: 2.5em;
        line-height: 2.5em;
        margin-top: 3.7%;
        border-radius: 7px;
        font-size: 3.2em;
        background-color: #08d346;
        color: #fff;
    }

設(shè)置的font-size:3.2rem，那么實(shí)際的的字體大小就是 3.2*10=32px;但是我們是適配頁(yè)面，不可能在所有的手機(jī)屏幕都顯示32px大小的，所以我們需要根據(jù)屏幕尺寸要改變字體的大小，所以最好是使用媒體查詢來(lái)修改最外層父元素的font-size，比如我的視覺(jué)稿是640px,量出來(lái)該按鈕的字體font-size是32px；那么當(dāng)我們把640px的視覺(jué)稿顯示成320px大小時(shí)，視覺(jué)稿縮小一半，那么相對(duì)應(yīng)的按鈕的字體font-size也會(huì)縮小一半成16px;所以我們只需要把最外層的父元素.m-lucky-number-dialog設(shè)置了font-size:5px;就可以了,這樣簡(jiǎn)單方便，其實(shí)10px、5px、并不是絕對(duì)的，看個(gè)人喜好，也可以設(shè)置20px、50px、只要等比縮放就好了

@media screen and (max-width: 375px) and (min-width: 320px) {
    .m-lucky-number-dialog {
        font-size: 5px;
    }
}

@media screen and (max-width: 414px) and (min-width: 375px) {
    .m-lucky-number-dialog {
        font-size: 6px;
    }
}

@media screen and (max-width: 639px) and (min-width: 414px) {
    .m-lucky-number-dialog {
        font-size: 6.5px;
    }
}

@media screen and (min-width: 640px) {
    .m-lucky-number-dialog {
        font-size: 10px;
    }
}

3、給元素設(shè)置height、line-height百分比不起作用
給元素設(shè)置寬高時(shí)，如果都能使用百分比，那么會(huì)簡(jiǎn)單很多，但是給height設(shè)置百分比大多不起作用(只要給最近的父元素設(shè)置了height，給子元素height設(shè)置百分比就起作用了)，更不用說(shuō)line-height了，而且line-height使我們是元素垂直居中很好的辦法，但是也不能設(shè)置px，所以還是設(shè)置em吧，雖然height、line-height起作用了，但是你會(huì)發(fā)現(xiàn)不符合你的期望。那么到底是為什么呢，那還是再看一下我的綠色按鈕吧,我給最外層設(shè)置的是10px,按鈕的原始高度是80px，可是我給它的height、line-height都設(shè)置了2.5em然后都顯示正確了,原因是當(dāng)使用em給某一個(gè)元素設(shè)置height、line-height時(shí)，它會(huì)先以自身的font-size為基準(zhǔn)，然后em單位再參考父元素，比如給按鈕元素設(shè)置了height:2.5em,那么它的真實(shí)高度是 2.5em * font-size = 8em，然后8em * 10px = 80px,如果該元素沒(méi)有設(shè)置font-size,那么就會(huì)以最近的父元素作為參考。

.d-btn {
        width: 77.8%;
        height: 2.5em;
        line-height: 2.5em;
        margin-top: 3.7%;
        border-radius: 7px;
        font-size: 3.2em;
        background-color: #08d346;
        color: #fff;
    }

4、使用sprite做背景圖不能準(zhǔn)確定位的問(wèn)題
我之前研究過(guò)使用sprite圖做背景圖的方法，結(jié)果發(fā)現(xiàn)rem配合百分比定位的效果還不錯(cuò)，需要涉及到的屬性是backgroun-size的適配，以及top、left、icon大小的計(jì)算，em的sprite圖適配有待研究，現(xiàn)在還是建議使用單張圖片，或者base-64.

以下是全部的sass代碼：

.m-lucky-number-dialog {
    width: 84%;
    margin: 100px auto;
    background-color: #fff;
    position: relative;
    font-size: 10px;
    overflow: hidden;
    padding: 16.7% 0;
    border-radius: 4px;
    .close-btn {
        position: absolute;
        width: 22px;
        height: 22px;
        top: 3.125%;
        right: 3.125%;
        background: transparent url("http://nos.netease.com/edu-image/4466DE7D9DA466817955EE00D40DD6E7.png") center center no-repeat;
        background-size: 22px;
    }
    h3,
    p,
    input,
    a,
    {
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    h3 {
        color: #fe7caa;
        font-size: 3em;
        font-weight: normal;
        width: 77.8%;
    }
    .number {
        width: 63%;
        height: 1.78em;
        line-height: 1.78em;
        color: #fe7caa;
        font-size: 4.5em;
        margin: 7.4% auto 0;
        background-color: #eee;
    }
    .tip-text {
        font-size: 1.8em;
        line-height: 1em;
        margin-top: 7.4%;
        color: #999;
    }
    .go-index {
        font-size: 1.8em;
        color: #999;
        margin-top: 3.7%;
        line-height: 14px;
        text-decoration: underline;
    }
    .d-btn {
        width: 77.8%;
        height: 2.5em;
        line-height: 2.5em;
        margin-top: 3.7%;
        border-radius: 7px;
        font-size: 3.2em;
        background-color: #08d346;
        color: #fff;
    }
    .no-phone-number {
        padding-top: 5.56%;
        input {
            border: 1px solid #d2d2d2;
            width: 77.8%;
            height: 4em;
            box-sizing: border-box;
            font-size: 2em;
            color: #222;
            border-radius: 7px;
            line-height: 4em;
            text-align: left;
            text-indent: 3.7%;
        }
        .d-btn {
            width: 77.8%;
            height: 2.5em;
            line-height: 2.5em;
            margin-top: 3.7%;
            border-radius: 7px;
            font-size: 3.2em;
            background-color: #08d346;
            color: #fff;
        }
    }
}