閱讀 ：
media queries 相關知識
準備建立檔案index.html
parper one file : index.html
copy it :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Media Queries Exercise</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>---博明的背景---
中文講得這樣好，肯定是在中國待過啦。
沒錯，博明之前在中國當了7年的駐華記者。
他1998年至2005年在北京，先幫路透社工作，後來轉到《華爾街日報》。
他那時候很年輕，三十出頭，就在中國跑各式各樣的重大新聞。
當初SARS在中國爆發時，他是第一個採訪中國外科醫生蔣彥永的外媒記者。（蔣算是SARS時期的吹哨者）
他也曾經做過中國政府腐敗的相關報導。
因為他的報導作風太大無畏，他曾多次被中共官員跟拍、被迫把採訪稿沖進馬桶。
最嚴重的一次是遭到北京警方毆打和拘捕。
當駐華記者當到這樣，博明也真夠拼命的。
上述這段經歷你要先記在腦海裡，因為跟後來博明的對中政策以及這場演講有很大的關係。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>準備建立檔案 style.css
parper one file : style.css
在ＣＳＳ上設定 media queries 功能：
p {
color: red;
}
@media screen and (max-width: 767px) {
p {
color: blue;
}
}透過上述的ＣＳＳ: media 設定用瀏覽器打開 index.html ,並且縮放視窗 ： 會看到 螢幕再放大縮小同時會自動換顏色.
上述設定表示文字預設為紅色，但螢幕尺寸小於 767px 時，文字將切換成藍色。之後直接拖曳瀏覽器視窗，觀察文字顏色的切換。
what is Viewport ??? ______(*´･д･)?
viewport mean :
- 我要讓 HTML 知道說我希望ＨＴＭＬ就是照裝置的寬度去計算 viewport -
that all !! 就是那麼白話簡單.
設定 Viewport 的寬度單位 :
<絕對寬度> ：
沒有設定viewport 寬度！
如果在手機上看到的畫面寬度是這樣. 你能接受嗎？
請問網頁內容是什麼….？
<相對寬度 >：
設定 viewport ！
告訴瀏覽器 viewport 的寬度以什麼設備手機為基準，以及設備寬度和 CSS 之間的比例關係。
你需要在 HTML 的 <head> 裡加入：
<meta name="viewport" content="width=device-width, initial-scale=1">標籤：
width=device-width
調整內容寬度為裝置寬度
initial-scale=1.0
設定「CSS 像素」和「裝置像素」的比例為 1:1。
開始測試吧！！！
<meta name="viewport" content="width=device-width, initial-scale=1">
手機看到的內容是不是清楚了呢？
進階： advencd
修改標籤至符合預期的大小
修改
width=device-width
width = 320px
告訴你的網頁內容要符合手機寬度320px
initial-scale=1initial-scale = 0.5
告訴網頁看到的內容在手機上要 1:0.5
試看看翻譯下面的ＴＡＧ標籤什麼意思？
<meta name=”viewport” content=”width=device-width, initial-scale=3">ans : 啟用同步螢幕大小 , 預設把頁面放大兩倍, 設定網頁的寬永遠符合裝置螢幕的寬
