自从使用了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>
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;
}
}
}
