root + vm vh 实现响应式字体
大家好,我是半夏👴,一個(gè)剛剛開始寫文的沙雕程序員.如果喜歡我的文章,可以關(guān)注? 點(diǎn)贊 👍 加我微信:frontendpicker,一起學(xué)習(xí)交流前端,成為更優(yōu)秀的工程師~關(guān)注公眾號(hào):搞前端的半夏,了解更多前端知識(shí)! 點(diǎn)我探索新世界!
原文鏈接 ==>http://sylblog.xin/archives/52
前言
一個(gè)網(wǎng)頁(yè)中最多的東西是啥? 正常人的第一反映肯定是文字,你要是跟我說是圖片,那我只能表示:
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)很難解決的問題就是文字的大小的問題了,面對(duì)千奇百怪的設(shè)備,如何解決文字的設(shè)配問題,是一個(gè)很重要的問題。
最初:@media
下面是兩個(gè)簡(jiǎn)單的例子,通過使用媒體查詢,改變字體在不同設(shè)備下的文字大小。這種做法的缺點(diǎn)在哪里呢?是因?yàn)閜x是固定的,如果你設(shè)置的設(shè)備的寬度范圍比較大,那么就會(huì)導(dǎo)致當(dāng)前的px在另一個(gè)設(shè)備上看上去很大或者很小。另一個(gè)問題是;你不可能所有的文字都用這個(gè)大小,還需要針對(duì)其他的文字進(jìn)行單獨(dú)的處理,很麻煩。代碼也很多。
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) {html{font-size:**px;}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {**px }加強(qiáng):@media + rem
rem就是html根元素font-size字體大小的倍數(shù)。
依賴于rem的特性,比較好的解決了,不同文字不同大小的問題。但是還是如何選擇設(shè)備寬度區(qū)間還是比較復(fù)雜的問題。
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) {html{font-size:**px;}p{font-size:1rem; }:root + vm + vh
對(duì)于我來說,我最喜歡的就是使用:root來做,但是你也可以選擇html,在:root中根據(jù)vm和vh來計(jì)算出字體的大小,從而實(shí)現(xiàn)設(shè)配不同的設(shè)備。
:root {font-size: calc(1vw + 1vh + .5vmin); }body {font-size: 1rem/1.6 }這個(gè)公式最終計(jì)算出來的大小是啥?先來簡(jiǎn)單回憶一下:
1vw = 視口寬度的 1%
1vh = 視口高度的 1%
1vmin = 1vw 或 1vh,以較小者為準(zhǔn)
1vmax = 1vw 或 1vh,以較大者為準(zhǔn)
如果我們將其應(yīng)用于 iPhone 7 的視口尺寸,即 375x667,計(jì)算出的值為:root:
:root {font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */ }結(jié)語(yǔ)
這幾個(gè)方法都可以使用,但我還是堅(jiān)持:root。除了這幾種方法,還有其他的方法,例如使用JS在頁(yè)面,根據(jù)視口的寬高,在根元素上設(shè)置文字的大小,這樣也是很好的一種解決方法,可自行嘗試。
總結(jié)
以上是生活随笔為你收集整理的root + vm vh 实现响应式字体的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hibernate二级缓存机制
- 下一篇: python修改wav文件声音大小_Py