文章詳情頁(yè)
html5 - 手機(jī)自適應(yīng)的圖片高度rem是怎么計(jì)算的
瀏覽:99日期:2023-06-16 11:53:55
問題描述
手機(jī)網(wǎng)頁(yè)布局是兩個(gè)li一行占滿寬度
li { width: 7.375rem; height: 4.5rem; float: left; margin-left: .4rem; position: relative;}li img{ width: 100%; height: 4.5rem; display: block; border-radius: .3rem; overflow: hidden; background-color: #fff;}
rem是根據(jù)html的font-size來(lái)自動(dòng)變的。請(qǐng)問這個(gè)li的初始寬高值怎么計(jì)算呢?
問題解答
回答1:你rem是怎么算的?拿我的計(jì)算方式說(shuō)吧!我計(jì)算的方式,就是:(屏幕寬度/效果圖寬度)*100+’px’;比如效果圖是750,屏幕375,1rem=(375/750)*100+’px’,就是1rem=50px如果一張圖片在效果圖上寬為100px,高為50px;那個(gè)樣式設(shè)置就是img{height:.5rem;width:1rem;}
但是我不明白就是,兩個(gè)li占滿一行,li寬度設(shè)置50%不就好了?
標(biāo)簽:
Html5
相關(guān)文章:
1. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?2. Matlab和Python編程相似嗎,有兩種都學(xué)過的人可以說(shuō)說(shuō)嗎3. 請(qǐng)教各位大佬,瀏覽器點(diǎn) 提交實(shí)例為什么沒有反應(yīng)4. javascript - avalon使用:duplex設(shè)置select默認(rèn)option的bug5. javascript - Web微信聊天輸入框解決方案6. docker - 如何修改運(yùn)行中容器的配置7. javascript - 音頻加載問題8. 網(wǎng)頁(yè)爬蟲 - 用Python3的requests庫(kù)模擬登陸B(tài)ilibili總是提示驗(yàn)證碼錯(cuò)誤怎么辦?9. javascript - 移動(dòng)端textarea不能上下滑動(dòng),該怎么解決?10. css - 對(duì)于類選擇器使用的問題
排行榜

熱門標(biāo)簽