meta viewport
什麼是 meta viewport ? viewport 有兩種
visual viewport: 是一個 js 物件，可以在瀏覽器的 console 中找到它的寬度用螢幕看，就等同於 screen.width 的值layout viewport: 在使用模擬器看手機排版時，可以用如圖的方式看見目前的 layout viewport 大小
<meta name="viewport"> 是當時 Apple 推出 iPhone 時為了讓網頁在 mobile device 上完好顯示，而設計出來的 meta tag
如果 html 檔的 <head> 區塊中，少了 meta 中定義 viewport 這些設定，瀏覽器會自行定義給予預設值，這樣網頁載入完成時的樣子可能會跟自己一開始的想像不同
// 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1" >
// 以下兩種設定都可以防止使用者做畫面縮放，將畫面鎖在縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" >
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0">
initial-scale=1, maximum-scale=1.0, minimum-scale=1.0這個是表示伸縮比，最大最低的伸縮比都在一倍
css3 新單位 vh vw
px、em、rem、%、vh/vm 的差別
px相對於顯示器屏幕分辨率，縮放螢幕的時候不會隨之變動。em相對於當前對象內文本的字體尺寸rem，r是root的縮寫，相對根元素<html>的字體大小%相對於它最近的父元素，但要注意的是如果裡面沒有任何內容，設定沒有意義，因為不會顯示出任何東西。vh/vw
縮放螢幕的時候，內容物隨之變動，vh(view height)，螢幕可視範圍高度的百分比；vw(view width)，螢幕可視範圍寬度的百分比。例如 :width: 60vw;就是螢幕寬度的 60%
vmin/vmax
螢幕可視範圍的高度和寬度，兩者的最小值或最大值
如果螢幕是 800px 600px
width: 60vmin;代表寬度是 60% 600px = 360px
width: 60vmax;代表寬度是 60% * 800px = 480px
網頁不要顯示 X 軸
因為我們都是由上往下看，左右滾輪體驗感很差
max-width : 1200px 最大就是 1200 ，但是視窗縮小會跟著縮小
img {
max-width :100%;
height:auto;
}
下面寬度( width + margin-right )加起來，不要超過 100%
menu {
width:60%;
margin-right: 10%;
}
全域 border box
*,*::before,*::after{
box-sizing: border-box;
}
Flex 的外容器與內元件
flex-wrap : wrap
先看權重，再看先後順序
後面改的放後面，如果權重一樣就會被蓋掉
<link rel="stylesheet" href="css/前輩 code.css">
<link rel="stylesheet" href="css/我的 code.css">
參考文章 :
認識 meta viewport
Responsive Web Design 基礎
[技術分享] Emmet簡易教學 - 快速上手包 : Emmet 是一個支援眾多程式編輯器的外掛
