html5 - 手機自適應的圖片高度rem是怎麼算的-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

html5 - 手機自適應的圖片高度rem是怎麼算的

怪我咯 2017-06-22 11:53:24

1103

#手機網頁版面是兩個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是根據html的font-size來自動改變的。
請問這個li的初始寬高值怎麼計算呢？

怪我咯

走同样的路，发现不同的人生

全部回覆 (1)

仅有的幸福2017-06-22 11:55:24 1樓

你rem是怎麼算的？
拿我的計算方式說吧！我計算的方式，就是：(螢幕寬度/效果圖寬度)*100+'px';
例如效果圖是750，螢幕375,1rem=(375/750)*100+'px',就是1rem=50px
如果一張圖片在效果圖上寬為100px,高為50px;那個樣式設定就是img{height:.5rem;width:1rem;}

但是我不懂就是，兩個li佔滿一行，li寬度設定50%不就好了？