亚洲av无码乱码国产一区二区,午夜理论片yy44880影院,午夜久久久久久禁播电影,熟睡人妻被讨厌的公侵犯

21
2017/04

手機(jī)端頁(yè)面如何固定圖片的大小

發(fā)布時(shí)間:2017-04-21 11:55:41
發(fā)布者:369563174
瀏覽量:
0

以前寫(xiě)移動(dòng)端頁(yè)面最頭疼的就是圖片比例的問(wèn)題,因?yàn)樗淖詣?dòng)縮放,高度是不好控制的,那么他如何去固定呢,這就使用到了rem屬性,這段時(shí)間我用rem做了一個(gè)實(shí)例,濟(jì)南美思慕整形移動(dòng)頁(yè)面:

圖片1.png

這里面的圖片就全部固定了大小,

.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嘗試一下。


關(guān)鍵詞:
返回列表