先準備一個網站資料夾「TS_web3」,接著再依以下步驟準備相關資源與檔案。
w3schools 的 w3.css 是一套簡潔有力協助 RWD 很不錯的框架套件,推薦使用。
在網頁的<head>區內 (在</head>的上一行) 輸入以下原始碼
<link rel="stylesheet" href="路徑/w3.css">
許多網站皆喜於圖示表達,Font Awesome 提供了豐富的圖示,可以搜尋「fa font 4.7」是Free的版本。
可以從專案一拷貝過來,如果沒用上就不需要下載或拷貝了。
在網頁的<head>區內輸入以下原始碼
<link rel="stylesheet" href="路徑/font-awesome/css/font-awesome.min.css">
網站中有些標題或重要文字希望能有統一的字體,可以運用 Google Web Font。
可以從專案一拷貝過來,如果沒用上就不需要下載或拷貝了。
在網頁的<head>區內貼上複製的語法,參考如下:
<link href="https://fonts.googleapis.com/css2?family= Noto+Sans+TC:wght@500&family=Righteous&display=swap" rel="stylesheet">
另外建議在CSS撰寫區的最上方加上 font-family:... 參考寫法的註解,在需要的時候複製貼上,參考如下:
/* font-family: 'Noto Sans TC', sans-serif; 中文黑體 font-family: 'Righteous', cursive; 英文方圓體 英文方圓體=>中文黑體=>電腦系統預設無襯線字體 */
建議也可以在CSS中撰寫一個class樣式,在需要的地方加上這個class樣式即可,參考如下:
.webfont { }
viewport是螢幕上瀏覽器的可視區域,viewport的宣告是告訴瀏覽器,目前裝置有多寬(或多高),以便在縮放時有個基準,如果設定 width=device-width 表示依比例呈現對應的可視寬度與高度。
在網頁的<head>區內meta宣告的位置輸入以下原始碼,檢查一下是否要調整。
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0">
【screensiz.es】或【Device Metrics】
設計了手機、平板、桌機...等各種顯示器規格,方便快速查詢了解螢幕顯示器的規格。