html5 - 手機(jī)自適應(yīng)的圖片高度rem是怎么計(jì)算的
問(wèn)題描述
手機(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)問(wèn)這個(gè)li的初始寬高值怎么計(jì)算呢?
問(wèn)題解答
回答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%不就好了?
相關(guān)文章:
1. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語(yǔ)法實(shí)現(xiàn)存在即更新應(yīng)該使用哪個(gè)標(biāo)簽?2. 哭遼 求大佬解答 控制器的join方法怎么轉(zhuǎn)模型方法3. mysql儲(chǔ)存json錯(cuò)誤4. mysql - 怎么生成這個(gè)sql表?5. mysql - 數(shù)據(jù)庫(kù)表中,兩個(gè)表互為外鍵參考如何解決6. Navicat for mysql 中以json格式儲(chǔ)存的數(shù)據(jù)存在大量反斜杠,如何去除?7. sql語(yǔ)句 - 如何在mysql中批量添加用戶(hù)?8. mysql - 表名稱(chēng)前綴到底有啥用?9. 編輯成功不顯示彈窗10. 怎么php怎么通過(guò)數(shù)組顯示sql查詢(xún)結(jié)果呢,查詢(xún)結(jié)果有多條,如圖。
