文章詳情頁
html5 - 手機自適應(yīng)的圖片高度rem是怎么計算的
瀏覽：85日期：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;那個樣式設(shè)置就是img{height:.5rem;width:1rem;}
但是我不明白就是，兩個li占滿一行，li寬度設(shè)置50%不就好了？
標簽：
Html5
相關(guān)文章：
1. mysql 查詢身份證號字段值有效的數(shù)據(jù)2. python bottle跑起來以后,定時執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?3. 視頻文件不能播放，怎么辦？4. html5 - HTML代碼中的文字亂碼是怎么回事？5. python - 爬蟲模擬登錄后，爬取csdn后臺文章列表遇到的問題6. visual-studio - Python OpenCV: 奇怪的自動補全問題7. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處8. javascript - 彈出一個子窗口，操作之后關(guān)閉，主窗口會得到相應(yīng)的響應(yīng)，例如網(wǎng)站的某些登錄界面，django后臺的管理等，這是怎么實現(xiàn)的呢？9. javascript - ios返回不執(zhí)行js怎么解決？10. android - 分享到微信，如何快速轉(zhuǎn)換成字節(jié)數(shù)組
排行榜
熱門標簽
網(wǎng)公網(wǎng)安備