您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了HTML中移動端最佳字體大小設(shè)置的方法,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來研究并學(xué)習(xí)一下“HTML中移動端最佳字體大小設(shè)置的方法”這篇文章吧。
html的全稱為超文本標(biāo)記語言,它是一種標(biāo)記語言,包含了一系列標(biāo)簽.通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體,html文本是由html命令組成的描述性文本,html命令可以說明文字,圖形、動畫、聲音、表格、鏈接等,主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。
移動端css單位該怎么用。px肯定是不行的,手機(jī)有那么多的尺寸,要寫多少@media。最常用的有兩個單位:
1、rem
rem是相對于根元素的大小設(shè)置的,網(wǎng)頁中的根元素指的是html我們通過設(shè)置html的字體大小就可以控制rem的大小。舉個例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html{ font-size:20px; } p{ width: 600px; overflow: hidden; line-height: 1; font-size: 1rem; } </style></head> <body> <p> 是啊啊啊 </p></body></html>
當(dāng)你在html根元素設(shè)置 font-size:20px;的時候,1rem = 20px;同理,如果設(shè)置10px,那么1 rem = 10px;rem不只是可以用于字體大小,也就可用于width等長度單位。這時你會問,這樣怎么做到響應(yīng)式呢?所以就要結(jié)合@media來設(shè)置html根元素的大小,這樣頁面里所有對應(yīng)的rem單位就會跟著根元素走,例如:
html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
如果你不設(shè)置html的字體大小,就會使用16px作為基數(shù)來。這個比px的好處顯而易見,你不需要對每個元素就進(jìn)行一次@media,只需要對html根元素做不同尺寸的設(shè)置就可以了,兼容性也很好。
2、vw、vh
rem單位雖然依舊很簡單了,但是依舊不夠簡單粗暴,還有一種更簡單的,就是vw、vh單位。
相對于視口的寬度。視口被均分為100單位的vw。比如,1vw就相當(dāng)于屏幕寬度的1%。直接上例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p{ width: 20vh; height: 30vw; line-height: 1; font-size: 1vw; background: #FC8B53; color: #fff; } </style> </head> <body> <p> 是啊啊啊 </p> </body> </html>
這么設(shè)置之后,p的寬度就隨著屏幕高度的變化而變化,它的高度就隨著屏幕寬度的變化而變化,字體的大小也隨著屏幕變化。我這么搞是為了更直觀的表示vw這個單位的靈活。再也不用寫一堆連七八糟的@media了。
怎么個靈活法呢?比如你設(shè)置一個p的寬度是屏幕的50%,那么width就是50vw。這時候,你要設(shè)置它的高度是它的寬度的50%,如果不用vw咋辦?你只能用js去算。但是用了vw就直接設(shè)置成25vw就搞定了。
但是這個有些兼容性的問題,ios是沒有問題的,安卓手機(jī)自帶瀏覽器要安卓系統(tǒng)4.4以上才行,別的瀏覽器都是可以的,只有自帶的有問題。 不過現(xiàn)在誰還用安卓自帶的瀏覽器去耍呢,在哪兒都找不到。所以,直接用vw、vh吧。
以上就是關(guān)于“HTML中移動端最佳字體大小設(shè)置的方法”的內(nèi)容,如果改文章對你有所幫助并覺得寫得不錯,勞請分享給你的好友一起學(xué)習(xí)新知識,若想了解更多相關(guān)知識內(nèi)容,請多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。