以前寫(xiě)移動(dòng)端頁(yè)面最頭疼的就是圖片比例的問(wèn)題,因?yàn)樗淖詣?dòng)縮放,高度是不好控制的,那么他如何去固定呢,這就使用到了rem屬性,這段時(shí)間我用rem做了一個(gè)實(shí)例,濟(jì)南美思慕整形移動(dòng)頁(yè)面:
這里面的圖片就全部固定了大小,
.jp-nr li img{width:26.33333rem; height:19.16666rem;}
但是rem不跟PX一樣直接量出來(lái),它是通過(guò)效果圖的寬度計(jì)算出來(lái)的,我們這個(gè)頁(yè)面做的是750px寬, 那么計(jì)算這個(gè)的時(shí)候就用圖片的寬度除以12,就出來(lái)圖片的寬度了,但是有時(shí)候不是那么精準(zhǔn),因?yàn)樗幌馪X一樣是固定的。那么這個(gè)12是哪里來(lái)的呢,這就用到了上次說(shuō)的媒體查詢(xún),
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) { html,body { font-size:12.5px; } } @media only screen and (max-width: 720px), only screen and (max-device-width:720px) { html,body { font-size:11.25px; } } @media only screen and (max-width: 640px), only screen and (max-device-width:640px) { html,body { font-size:10px; } } @media only screen and (max-width: 600px), only screen and (max-device-width:600px) { html,body { font-size:9.375px; } }
你這里面對(duì)應(yīng)的字體是多大,你就用它本身的寬去除以你寫(xiě)的像素就算出來(lái)了,建議大家先去自己寫(xiě)個(gè)demo嘗試一下。
下一篇: 英文字母不自動(dòng)換行怎么解決