久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

css3 - 使用rem設置padding大小的問題

瀏覽:129日期:2023-07-02 09:08:52

問題描述

HTML代碼:

<p class='container-fluid'>rem再體驗</p>

主要樣式為:

html{font-size: 6.25%;}//也就是1rem等同于1px.container-fluid{font-size:16rem; padding:15rem; margin:15rem;}

看到這樣的代碼,我認為container-fluid的字體大小為16px,padding值為15px,可實際上呢?Chrome(版本號:53.0.2756.0 (64-bit))是這樣的: 字體大小符合期望;而padding值是180px,不符合期望,應為15px。css3 - 使用rem設置padding大小的問題

Firefox(版本號:47.0.1)是這樣的:字體和padding效果符合期望。css3 - 使用rem設置padding大小的問題

為什么chrome的padding效果會出乎意料?

那么我把樣式改改,font-size: 6.25%;改為:font-size: 62.5%

html{font-size: 62.5%;}.container-fluid{font-size:1.6rem; padding:1.5rem; margin:1.5rem;}

Chrome(版本號:53.0.2756.0 (64-bit))是這樣的:字體大小符合期望;而padding值是18px,不符合期望,應為15px。css3 - 使用rem設置padding大小的問題

Firefox(版本號:47.0.1)是這樣的:字體和padding效果符合期望。css3 - 使用rem設置padding大小的問題

同樣的,chrome的padding效果出乎意料。

再改,把樣式再改,font-size: 62.5%;改為:font-size: 625%

html{font-size: 625%;}.container-fluid{font-size:0.16rem; padding:0.15rem; margin:0.15rem;}

Chrome(版本號:53.0.2756.0 (64-bit))是這樣的:字體和padding效果符合期望!!!css3 - 使用rem設置padding大小的問題

Firefox(版本號:47.0.1)是這樣的:字體和padding效果符合期望。css3 - 使用rem設置padding大小的問題

為什么chrome對rem的支持會存在著差異呢?

問題解答

回答1:

Chrome為了用戶體驗,瀏覽器默認最小號12px,設置里可以修改。你把HTML設置的這么小,在手機端上你也會哭的,有些安卓機最小支持5px,建議最小62.5%,然后除以20使用

回答2:

pc端,把html的font-size設置小于12px,會變成12px,實際上計算font-size是12px。

回答3:

樓主找到原因沒?求解

標簽: CSS
相關文章:
主站蜘蛛池模板: 酉阳| 安溪县| 富阳市| 蒲城县| 余姚市| 阳江市| 泾阳县| 库尔勒市| 天等县| 于都县| 东乌珠穆沁旗| 肇源县| 汝州市| 林口县| 元江| 新化县| 鲁山县| 象州县| 遂昌县| 米易县| 抚顺市| 含山县| 安丘市| 苍山县| 陆川县| 鄯善县| 藁城市| 翁牛特旗| 册亨县| 冀州市| 灯塔市| 循化| 明水县| 礼泉县| 康马县| 津市市| 永靖县| 中江县| 门头沟区| 荣成市| 邳州市|