自從使用了rem的適配方案之后大脉，已經(jīng)徹底的忘記其他的適配了胡野。但是今天在主站中做一個彈窗UI幕屹，由于主站之前沒用rem適配太惠，所以只能使用百分比加媒體查詢做適配了。在使用的過程中偶爾明白了以前一直沒有了解的一些問題疲憋，記錄一下凿渊，頁面可以根據(jù)窗口的大小自適應(yīng)縮放，這個demo鏈接缚柳。
1埃脏、元素的寬度使用了百分比來定寬，這樣就可以根據(jù)屏幕的寬度來自適應(yīng)了秋忙。這個方式要注意百分比的參考的基準(zhǔn)彩掐。使用百分比定寬的元素，百分比參考的是該元素最近的灰追、定了寬度的堵幽、父元素。
<div class="m-lucky-number-dialog">
<h3>恭喜你獲得一張618的幸運(yùn)號弹澎！</h3>
<p class="number">452124</p>
<p class="tip-text"><span>6.18當(dāng)日憑此幸運(yùn)號兌獎</span><i>朴下，</i><span>中獎信息將短信提醒哦~</span></p>
<div class="no-phone-number">
<input type="text" placeholder="中獎信息不容錯過，趕快填寫吧">
<a class="d-btn save-phone-number">保存手機(jī)號</a>
<a target="_blank" class="go-index">幸運(yùn)號是什么苦蒿？</a>
</div>
<a class="close-btn"></a>
</div>
2殴胧、字體大小font-size的參考值
由于我們的字體大小使用的是em為字體單位，所以必須要有一個參考值佩迟。其實(shí)em跟百分比的寬度參考規(guī)則一樣团滥，如果父元素沒有設(shè)置font-size,那么它的參考對象就會一直往上冒泡，直到body报强，也就是參考的是該元素最近的灸姊，定了font-size的、父元素躺涝。元素最終字體大小是 該元素的字體大小 * 所參考的父元素的字體大小
比如我給最外層父元素.m-lucky-number-dialog設(shè)置了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;
}
設(shè)置的font-size:3.2rem扼雏，那么實(shí)際的的字體大小就是 3.2*10=32px;但是我們是適配頁面，不可能在所有的手機(jī)屏幕都顯示32px大小的夯膀，所以我們需要根據(jù)屏幕尺寸要改變字體的大小诗充，所以最好是使用媒體查詢來修改最外層父元素的font-size，比如我的視覺稿是640px,量出來該按鈕的字體font-size是32px诱建；那么當(dāng)我們把640px的視覺稿顯示成320px大小時蝴蜓，視覺稿縮小一半，那么相對應(yīng)的按鈕的字體font-size也會縮小一半成16px;所以我們只需要把最外層的父元素.m-lucky-number-dialog設(shè)置了font-size:5px;就可以了,這樣簡單方便俺猿，其實(shí)10px茎匠、5px、并不是絕對的押袍，看個人喜好诵冒，也可以設(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è)置寬高時圈盔，如果都能使用百分比豹芯，那么會簡單很多，但是給height設(shè)置百分比大多不起作用(只要給最近的父元素設(shè)置了height驱敲，給子元素height設(shè)置百分比就起作用了)铁蹈，更不用說line-height了，而且line-height使我們是元素垂直居中很好的辦法众眨，但是也不能設(shè)置px握牧，所以還是設(shè)置em吧，雖然height围辙、line-height起作用了我碟，但是你會發(fā)現(xiàn)不符合你的期望。那么到底是為什么呢姚建，那還是再看一下我的綠色按鈕吧,我給最外層設(shè)置的是10px,按鈕的原始高度是80px矫俺，可是我給它的height、line-height都設(shè)置了2.5em然后都顯示正確了,原因是當(dāng)使用em給某一個元素設(shè)置height掸冤、line-height時厘托，它會先以自身的font-size為基準(zhǔn)，然后em單位再參考父元素稿湿，比如給按鈕元素設(shè)置了height:2.5em,那么它的真實(shí)高度是 2.5em * font-size = 8em铅匹，然后8em * 10px = 80px,如果該元素沒有設(shè)置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做背景圖不能準(zhǔn)確定位的問題
我之前研究過使用sprite圖做背景圖的方法包斑，結(jié)果發(fā)現(xiàn)rem配合百分比定位的效果還不錯流礁，需要涉及到的屬性是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;
}
}
}
