這篇文章主要為大家展示了HTML中移動端很好字體大小設置的方法，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“HTML中移動端很好字體大小設置的方法”這篇文章吧。

創(chuàng)新互聯(lián)專注于古浪網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供古浪營銷型網(wǎng)站建設，古浪網(wǎng)站制作、古浪網(wǎng)頁設計、古浪網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務，打造古浪網(wǎng)絡公司原創(chuàng)品牌,更為您提供古浪網(wǎng)站排名全網(wǎng)營銷落地服務。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

移動端css單位該怎么用。px肯定是不行的，手機有那么多的尺寸，要寫多少@media。最常用的有兩個單位：
1、rem

rem是相對于根元素的大小設置的，網(wǎng)頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。舉個例子：

    
    
    
        
html{            
font-size:20px;        }        
p{            
width: 600px;            
overflow: hidden;            
line-height: 1;            
font-size: 1rem;        }    
        
        是啊啊啊    

當你在html根元素設置 font-size:20px;的時候，1rem = 20px；同理，如果設置10px，那么1 rem = 10px；rem不只是可以用于字體大小，也就可用于width等長度單位。這時你會問，這樣怎么做到響應式呢？所以就要結(jié)合@media來設置html根元素的大小，這樣頁面里所有對應的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; 
      }
  }

如果你不設置html的字體大小，就會使用16px作為基數(shù)來。這個比px的好處顯而易見，你不需要對每個元素就進行一次@media，只需要對html根元素做不同尺寸的設置就可以了，兼容性也很好。
2、vw、vh
rem單位雖然依舊很簡單了，但是依舊不夠簡單粗暴，還有一種更簡單的，就是vw、vh單位。

相對于視口的寬度。視口被均分為100單位的vw。比如，1vw就相當于屏幕寬度的1%。直接上例子

    
    
    
        p{
            width: 20vh;
            height: 30vw;
            line-height: 1;
            font-size: 1vw;
            background: #FC8B53;
            color: #fff;
        }
    
 

    

        是啊啊啊
    

這么設置之后，p的寬度就隨著屏幕高度的變化而變化，它的高度就隨著屏幕寬度的變化而變化，字體的大小也隨著屏幕變化。我這么搞是為了更直觀的表示vw這個單位的靈活。再也不用寫一堆連七八糟的@media了。
怎么個靈活法呢？比如你設置一個p的寬度是屏幕的50%，那么width就是50vw。這時候，你要設置它的高度是它的寬度的50%，如果不用vw咋辦？你只能用js去算。但是用了vw就直接設置成25vw就搞定了。
但是這個有些兼容性的問題，ios是沒有問題的，安卓手機自帶瀏覽器要安卓系統(tǒng)4.4以上才行，別的瀏覽器都是可以的，只有自帶的有問題。 不過現(xiàn)在誰還用安卓自帶的瀏覽器去耍呢，在哪兒都找不到。所以，直接用vw、vh吧。

以上就是關(guān)于“HTML中移動端很好字體大小設置的方法”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：HTML中移動端很好字體大小設置的方法-創(chuàng)新互聯(lián)
標題URL：http://weahome.cn/article/dchgdi.html