設計原則 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%，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509380.html
標籤：Html/Css
上一篇：JavaScript基礎知識
下一篇：HTML & CSS 設計原則