欧美成人片一区二区三区,久久碰人妻一区二区三区,久久婷婷激情综合色综合俺也去,狂野欧美性猛交免费视频,久久夜色精品国产亚洲

21
2017/04

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

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

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

圖片1.png

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

.jp-nr li img{width:26.33333rem; height:19.16666rem;}

但是rem不跟PX一樣直接量出來,它是通過效果圖的寬度計(jì)算出來的,我們這個頁面做的是750px寬, 那么計(jì)算這個的時候就用圖片的寬度除以12,就出來圖片的寬度了,但是有時候不是那么精準(zhǔn),因?yàn)樗幌馪X一樣是固定的。那么這個12是哪里來的呢,這就用到了上次說的媒體查詢,

@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;
 }
 }

你這里面對應(yīng)的字體是多大,你就用它本身的寬去除以你寫的像素就算出來了,建議大家先去自己寫個demo嘗試一下。


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