CSS, CSS3, 網頁設計

[教學] 透過CSS讓文字支援RWD隨著裝置自行縮放文字大小

梅干2018/07/09
梅問題-[教學]透過CSS讓文字也支援RWD隨著裝置自行縮放文字大小
  當在設計RWD自應應網頁時,無論是圖片還是div都能隨著裝置解晰的不同,而自行隨著裝置調整寬度,以達到最佳的可視範圍,同時也不會造成跑版的問題,而這一切都要歸功於CSS3的新屬性,讓現在網頁無論在手機還是桌機上瀏覽,都可以正常的顯示與預覽。
  在網頁的元素中,文字的部分則無法隨著裝置,自行的調整文字大小,而需要依照裝置,依續的來設定,文字的尺寸,才能讓文字的字級隨著裝置自行縮放,且有時若沒設定好時,當文字不在設定的範圍內,就會突然的變大或縮小,雖然說目前CSS3針對文字的部分,有提供了一組新單位為vmin,雖然可解決部分的問題,但在梅干實測後,還是有些落差,因此梅干上網爬了些文字後,再作了些調整,讓文字能隨著裝置,調整文字的字級比例,讓文字在任何裝置底下都能容易閱讀,同時無需透過javascript,原生的CSS就可實現RWD自適應文字喔!
Step1
首先,先在html中,建立文字區塊,這邊梅干分別,建立二組文字區塊,一個是套用,另一個是未套用。
 <p class="rwdtxt">
    全球有1/4的網站,都是使用WordPress所架設,就連美國白宮官方網站,也是採用WordPress所架設,最主要的原因就在於,WordPress簡易、方便、好操控,同時更助於SEO的優化,以及網路上也有豐富的外掛資源,與佈景主題可使用,就可將WordPress變成購物車、公司官網、活動網站、個人作品網.....,雖然說買佈景很快,但要俢改或加入元素進去時,就相當的麻煩,甚至網站也很肥大,瀏覽速度相當的緩慢,因此這時只有自行開發與設計,才能讓網站方便修改,甚至開啟的速度更快,而開發WordPress佈景一點都不難,也無需了解PHP語法,就能客製化自己的佈景主題來囉
  </p>
  <hr>
  <p>
    全球有1/4的網站,都是使用WordPress所架設,就連美國白宮官方網站,也是採用WordPress所架設,最主要的原因就在於,WordPress簡易、方便、好操控,同時更助於SEO的優化,以及網路上也有豐富的外掛資源,與佈景主題可使用,就可將WordPress變成購物車、公司官網、活動網站、個人作品網.....,雖然說買佈景很快,但要俢改或加入元素進去時,就相當的麻煩,甚至網站也很肥大,瀏覽速度相當的緩慢,因此這時只有自行開發與設計,才能讓網站方便修改,甚至開啟的速度更快,而開發WordPress佈景一點都不難,也無需了解PHP語法,就能客製化自己的佈景主題來囉
  </p>

Step2
接著在CSS的地方,分別加入CSS的設定,當要調整文字大小時,可直接修改html的尺寸即可,剩下的比例,梅干已經調整過。
html{
  font-size: 14px;
}
.rwdtxt {
  font-size: 1.2rem;
  color:green;
}
@media (min-width: 600px) and (max-width: 1200px) {
  .rwdtxt {
   font-size: calc(1.2rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
  color:blue;
  }
}
@media (min-width: 1200px) {
  .rwdtxt {
     font-size: 1.3rem;
     color:red;
  }
}

Step3
當設定完畢後,再到各裝置測試看看,這時無論在任何裝置,文字的尺寸大小看起來比例是一致的,因此下回當遇到文字時,不妨可試試看囉!
#桌機
梅問題-[教學]透過CSS讓文字也支援RWD隨著裝置自行縮放文字大小
#平板
梅問題-[教學]透過CSS讓文字也支援RWD隨著裝置自行縮放文字大小
#手機
梅問題-[教學]透過CSS讓文字也支援RWD隨著裝置自行縮放文字大小
#範例預覽

See the Pen RWD Font Size by minwt (@minwt) on CodePen.