移动端使用百分比与em做适配

自从使用了rem的适配方案之后，已经彻底的忘记其他的适配了。但是今天在主站中做一个弹窗UI，由于主站之前没用rem适配，所以只能使用百分比加媒体查询做适配了。在使用的过程中偶尔明白了以前一直没有了解的一些问题，记录一下，页面可以根据窗口的大小自适应缩放，这个demo链接。

1、元素的宽度使用了百分比来定宽，这样就可以根据屏幕的宽度来自适应了。这个方式要注意百分比的参考的基准。使用百分比定宽的元素，百分比参考的是该元素最近的、定了宽度的、父元素。

    <div class="m-lucky-number-dialog">
        <h3>恭喜你获得一张618的幸运号！</h3>
        <p class="number">452124</p>
        <p class="tip-text"><span>6.18当日凭此幸运号兑奖</span><i>，</i><span>中奖信息将短信提醒哦~</span></p>
        <div class="no-phone-number">
            <input type="text" placeholder="中奖信息不容错过，赶快填写吧">
            <a class="d-btn save-phone-number">保存手机号</a>
            <a href="http://study.163.com" target="_blank" class="go-index">幸运号是什么？</a>
        </div>
        <a class="close-btn"></a>
    </div>

Paste_Image.png

2、字体大小font-size的参考值
由于我们的字体大小使用的是em为字体单位，所以必须要有一个参考值。其实em跟百分比的宽度参考规则一样，如果父元素没有设置font-size,那么它的参考对象就会一直往上冒泡，直到body，也就是参考的是该元素最近的，定了font-size的、父元素。元素最终字体大小是　该元素的字体大小 * 所参考的父元素的字体大小
比如我给最外层父元素.m-lucky-number-dialog设置了font-size:10px;,那么它里面的所有元素的字体大小都会参考它，比如我的绿色的按钮.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;
    }

设置的font-size:3.2rem，那么实际的的字体大小就是 3.2*10=32px;但是我们是适配页面，不可能在所有的手机屏幕都显示32px大小的，所以我们需要根据屏幕尺寸要改变字体的大小，所以最好是使用媒体查询来修改最外层父元素的font-size，比如我的视觉稿是640px,量出来该按钮的字体font-size是32px；那么当我们把640px的视觉稿显示成320px大小时，视觉稿缩小一半，那么相对应的按钮的字体font-size也会缩小一半成16px;所以我们只需要把最外层的父元素.m-lucky-number-dialog设置了font-size:5px;就可以了,这样简单方便，其实10px、5px、并不是绝对的，看个人喜好，也可以设置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、给元素设置height、line-height百分比不起作用
给元素设置宽高时，如果都能使用百分比，那么会简单很多，但是给height设置百分比大多不起作用(只要给最近的父元素设置了height，给子元素height设置百分比就起作用了)，更不用说line-height了，而且line-height使我们是元素垂直居中很好的办法，但是也不能设置px，所以还是设置em吧，虽然height、line-height起作用了，但是你会发现不符合你的期望。那么到底是为什么呢，那还是再看一下我的绿色按钮吧,我给最外层设置的是10px,按钮的原始高度是80px，可是我给它的height、line-height都设置了2.5em然后都显示正确了,原因是当使用em给某一个元素设置height、line-height时，它会先以自身的font-size为基准，然后em单位再参考父元素，比如给按钮元素设置了height:2.5em,那么它的真实高度是 2.5em * font-size = 8em，然后8em * 10px = 80px,如果该元素没有设置font-size,那么就会以最近的父元素作为参考。

.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做背景图不能准确定位的问题
我之前研究过使用sprite图做背景图的方法，结果发现rem配合百分比定位的效果还不错，需要涉及到的属性是backgroun-size的适配，以及top、left、icon大小的计算，em的sprite图适配有待研究，现在还是建议使用单张图片，或者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;
        }
    }
}