## 輸出語句* 1.window.alert() --寫入警告框* 2.document.write() 寫入HTML輸出* 3.console.log() 寫入瀏覽器控制台* alert("hello world!");//寫入警告框document.write("你好世界~");console ...
設計原則 Design Principle
響應式設計 Responsive
響應式設計的意思是網頁能夠根據其顯示在的屏幕的大小自動伸縮。
響應式設計使得對筆記本和手機用戶更加友好。
解析度的計算：寬度 * 高度，最常見的屏幕解析度是 1920px * 1080px。
響應式設計三大技術:
- Flexible grids 靈活網格：由列，gutter（列之間的間隔） 和 margin（內容和屏幕的左右邊界的間隔） 組成。該技術不以像素為單位，而是以百分比為單位適應屏幕。
- Fluid images 流式圖片：設置
max-width值為100%可確保圖片不超出父容器的範圍；設置height屬性為auto可以保持圖片的原始寬高比。 - Media queries 媒體查詢：是 CSS 的一部分，允許開發者指定長寬比（aspect ratio）和方向（orientation）來有條件地應用 CSS。
在響應式設計中，像素值通常被稱為“斷點（breakpoint）”。斷點指的是網頁的內容和佈局會自適應並儘可能提供最好的用戶體驗。
斷點可以在三種柵格下發揮作用：
- Fixed grid 固定柵格：由列和靈活的 margin 組成。其內容（列）大小是固定的，而 margin 則會根據屏幕的寬度自動伸縮。
- Fluid grid 流式柵格：由列，gutter 和 margin 組成。其內容（列）大小可變，會自動伸縮適應屏幕，gutter 是固定的。
- Hybird grid 混合柵格：結合了以上兩種方式，有些應用會根據使用設備的不同有不同的 CSS 規則。
媒體查詢 Media Query
媒體查詢是 CSS3 中引入的一項新技術，它可以根據不同的視窗大小調整內容的佈局。 視窗是指瀏覽器中，用戶可見的網頁內容。 視窗會隨訪問網站的設備不同而改變。
媒體查詢由媒體類型組成，如果媒體類型與展示網頁的設備類型匹配，則應用對應的樣式。 在媒體查詢中使用各種選擇器和樣式。
@media (max-height: 800px) {
p {
font-size: 10px;
}
}
針對高解析度屏幕應使用視網膜圖片 Higher Resolution Display
像素密度就是區分不同顯示設備的一個指標，它一般會以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸點數）為計量單位。
讓圖像正確出現在高解析度顯示器（例如 MacBook Pro's “Revistina display”）上的最簡單方式， 是定義它們的 width 和 height 值為原始值的一半。
img {
width: 100px;
height: 100px;
}
使排版根據設備尺寸自如響應 Typography Responsive
除了使用 em 或 px 設置文本大小，還可以用視窗單位來做響應式排版。 視窗單位和百分比都是相對單位，但它們是基於不同的參照物。 視窗單位是相對於設備的視窗尺寸（寬度或高度），百分比是相對於父級元素的大小。
四個不同的視窗單位分別是：
vw：如10vw的意思是視窗寬度的 10%。vh：如3vh的意思是視窗高度的 3%。vmin：如70vmin的意思是視窗的高度和寬度中較小一個的 70%。vmax：如100vmax的意思是視窗的高度和寬度中較大一個的 100%。
