文章詳情頁
html5 - 手機自適應的圖片高度rem是怎么計算的
瀏覽:74日期:2023-06-16 11:53:55
問題描述
手機網(wǎng)頁布局是兩個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來自動變的。請問這個li的初始寬高值怎么計算呢?
問題解答
回答1:你rem是怎么算的?拿我的計算方式說吧!我計算的方式,就是:(屏幕寬度/效果圖寬度)*100+’px’;比如效果圖是750,屏幕375,1rem=(375/750)*100+’px’,就是1rem=50px如果一張圖片在效果圖上寬為100px,高為50px;那個樣式設置就是img{height:.5rem;width:1rem;}
但是我不明白就是,兩個li占滿一行,li寬度設置50%不就好了?
標簽:
Html5
相關文章:
1. atom開始輸入!然后按tab只有空格出現(xiàn)沒有html格式出現(xiàn)2. css - 如何選擇字體?3. javascript - 有適合開發(fā)手機端Html5網(wǎng)頁小游戲的前端框架嗎?4. Phpstorm搭配Sqlsever2008實現(xiàn)PDO連接報錯5. java - 線上應用,如果數(shù)據(jù)庫操作失敗的話應該如何處理?6. javascript - arguments.callee7. javascript - js setTimeout在雙重for循環(huán)中如何使用?8. mysql - 這種分級一對多,且分級不平衡的模型該怎么設計表?9. java - 創(chuàng)建maven項目失敗了 求解決方法10. MySQL中的enum類型有什么優(yōu)點?
排行榜

熱門標簽