• 試做 RWD 網頁；@media .....
2022-11-20
由於網頁行動化( Web mobile )在全球已成定局，由此看來，自己的網站似乎已是石器時代的產品了，再不趕緊在網頁上弄個 @media query ，往後可都要羞於見人了。
這不是筆者首次嘗試製做 RWD 網頁，在此之前已經失敗了三～四次，每次都是在自信心跳空跌停的情況下黯然收場。
雖然這一次的嘗試仍然沒有獲得突破性的進展，但是在嘗試的過程中卻偶然的發現了在 Html 文檔中鏈接 CSS 文件的使用方法。收穫雖屬僥倖，卻受益無窮。
<link rel="stylesheet" type="text/css" href="css/font.css" />
將上述程式碼放在在Html 的 <head> 與 </head>
之間。其目的就是讓本網頁能調用存於本機中的 font.css 文檔。
當預想的效果在瀏覽器成功顯示時，長呼一口氣，心裏想著：「靠，原來如此！」。原本已經所剩無幾的自信心，現在終於可以慢慢的拾缀回來了。
本次嘗試的動機是希望能找到，網頁中的文字大小能依設備螢幕的大小做自動調節的方法。在爬了N 篇教學文，與多次的嘗試之後，終於找到可行的做法。
由於篇幅太短，就將語法節錄如下，權作充填。
html code :
<p class="rwdtxt">
</p>
font.css：
html{
font-size:16px;
font-family:微軟正黑體;
}
.rwdtxt {
font-size: 1.6rem;
color:green;
}
@media (max-width: 780px) {
.rwdtxt {
font-size: 2.0rem;
color:blue;
}
}
@media
(min-width: 1200px) {
.rwdtxt {
font-size: 1.3rem;
color:black;
}
}
再強調一下，上述程式碼皆是從網路上教學文章中節錄下來的，非本人作品。（不知道這樣是算學習，還是瓢竊？）
