媒体查询加上rem实现页面字体大小自适应
生活随笔
收集整理的這篇文章主要介紹了
媒体查询加上rem实现页面字体大小自适应
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
媒體查詢加上rem實(shí)現(xiàn)頁面字體大小自適應(yīng)
實(shí)現(xiàn)
以375px大小為基準(zhǔn)把根字體設(shè)為16px
通過媒體查詢適配不同屏幕大小，加上計(jì)算屬性和rem實(shí)現(xiàn)字體大小自適應(yīng)
代碼
下面是一套在實(shí)際開發(fā)中，兼容性較好的實(shí)踐代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><style>html {font-size: 16px;}@media screen and (min-width: 375px) {html {/* iPhone6的375px尺寸作為16px基準(zhǔn)，414px正好18px大小, 600 20px */font-size: calc(100% + 2 * (100vw - 375px) / 39);font-size: calc(16px + 2 * (100vw - 375px) / 39);}}@media screen and (min-width: 414px) {html {/* 414px-1000px每100像素寬字體增加1px(18px-22px) */font-size: calc(112.5% + 4 * (100vw - 414px) / 586);font-size: calc(18px + 4 * (100vw - 414px) / 586);}}@media screen and (min-width: 600px) {html {/* 600px-1000px每100像素寬字體增加1px(20px-24px) */font-size: calc(125% + 4 * (100vw - 600px) / 400);font-size: calc(20px + 4 * (100vw - 600px) / 400);}}@media screen and (min-width: 1000px) {html {/* 1000px往后是每100像素0.5px增加 */font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);font-size: calc(22px + 6 * (100vw - 1000px) / 1000);}}</style><body><div style="font-size: 1.0rem;">我是16px</div><div style="font-size: 1.125rem;">我是18px</div></body> </html>總結(jié)
以上是生活随笔為你收集整理的媒体查询加上rem实现页面字体大小自适应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数字证书如何写入到ukey_ukey身份
- 下一篇： web前端 html+css+javas