大家知道使用div css像素嗎?如果不知道的趕緊看看我們給大家整理出來的教程
在我做這項研究之前,我一直使用像素來設置我的字體大小。這是因為現在的大多數浏覽器允許用戶在字體太小的情況下自行放大頁面,所以使用像素並沒有什麼問題。
但是,我發現這種方式在很大程度上限制了擴展能力。雖然我的字體在中小屏幕上看起來不錯,但他應該在大屏幕上有更好的優化。即便用戶有放大的選項,這也不應該是我們希望他們來做的事情。
因此我使用rem設置的解決方案是(使用像素作為備用)。
CSS Code復制內容到剪貼板
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
font-size: 32px;
font-size: 3.2rem;
}
這樣我擴大了字體大小而只需要這樣寫——
CSS Code復制內容到剪貼板
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
這個方法是用像素作為降級單位因為IE8及以下不支持rem。這有一個問題是當我改變基礎字體大小時只能應用在可擴展性大小上面而不適用於後備字體大小。不過我不認為這是一個巨大的問題,因為這個問題對於較大規模的設備的核心來說只是一個額外的問題。
如果你有任何關於如何改善這個問題的想法,請在評論裡讓我知道。我也可以寫一個SCSS的混入,這樣我可以不必輸入這兩個後備和rem單位。
使用div css像素精彩內容就到這裡了!希望大家可以好好利用!
相關推薦:
如何提高CSS網頁渲染效率呢