設(shè)計(jì)原則 Design Principle

響應(yīng)式設(shè)計(jì) Responsive

響應(yīng)式設(shè)計(jì)的意思是網(wǎng)頁能夠根據(jù)其顯示在的屏幕的大小自動伸縮。

寧陽網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),寧陽網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為寧陽近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的寧陽做網(wǎng)站的公司定做！

響應(yīng)式設(shè)計(jì)使得對筆記本和手機(jī)用戶更加友好。

分辨率的計(jì)算：寬度 * 高度，最常見的屏幕分辨率是 1920px * 1080px。

響應(yīng)式設(shè)計(jì)三大技術(shù):

1. Flexible grids 靈活網(wǎng)格：由列，gutter（列之間的間隔） 和 margin（內(nèi)容和屏幕的左右邊界的間隔） 組成。該技術(shù)不以像素為單位，而是以百分比為單位適應(yīng)屏幕。
2. Fluid images 流式圖片：設(shè)置 max-width 值為 100% 可確保圖片不超出父容器的范圍；設(shè)置 height 屬性為 auto 可以保持圖片的原始寬高比。
3. Media queries 媒體查詢：是 CSS 的一部分，允許開發(fā)者指定長寬比（aspect ratio）和方向（orientation）來有條件地應(yīng)用 CSS。

在響應(yīng)式設(shè)計(jì)中，像素值通常被稱為“斷點(diǎn)（breakpoint）”。斷點(diǎn)指的是網(wǎng)頁的內(nèi)容和布局會自適應(yīng)并盡可能提供最好的用戶體驗(yàn)。

斷點(diǎn)可以在三種柵格下發(fā)揮作用：

1. Fixed grid 固定柵格：由列和靈活的 margin 組成。其內(nèi)容（列）大小是固定的，而 margin 則會根據(jù)屏幕的寬度自動伸縮。
2. Fluid grid 流式柵格：由列，gutter 和 margin 組成。其內(nèi)容（列）大小可變，會自動伸縮適應(yīng)屏幕，gutter 是固定的。
3. Hybird grid 混合柵格：結(jié)合了以上兩種方式，有些應(yīng)用會根據(jù)使用設(shè)備的不同有不同的 CSS 規(guī)則。

媒體查詢 Media Query

媒體查詢是 CSS3 中引入的一項(xiàng)新技術(shù)，它可以根據(jù)不同的視窗大小調(diào)整內(nèi)容的布局。 視窗是指瀏覽器中，用戶可見的網(wǎng)頁內(nèi)容。 視窗會隨訪問網(wǎng)站的設(shè)備不同而改變。

媒體查詢由媒體類型組成，如果媒體類型與展示網(wǎng)頁的設(shè)備類型匹配，則應(yīng)用對應(yīng)的樣式。 在媒體查詢中使用各種選擇器和樣式。

@media (max-height: 800px) {
  p {
    font-size: 10px;
  }
}

針對高分辨率屏幕應(yīng)使用視網(wǎng)膜圖片 Higher Resolution Display

像素密度就是區(qū)分不同顯示設(shè)備的一個指標(biāo)，它一般會以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸點(diǎn)數(shù)）為計(jì)量單位。

讓圖像正確出現(xiàn)在高分辨率顯示器（例如 MacBook Pro's “Revistina display”）上的最簡單方式， 是定義它們的 width 和 height 值為原始值的一半。

img {
  width: 100px;
  height: 100px;
}

使排版根據(jù)設(shè)備尺寸自如響應(yīng) Typography Responsive

除了使用 em 或 px 設(shè)置文本大小，還可以用視窗單位來做響應(yīng)式排版。 視窗單位和百分比都是相對單位，但它們是基于不同的參照物。 視窗單位是相對于設(shè)備的視窗尺寸（寬度或高度），百分比是相對于父級元素的大小。

四個不同的視窗單位分別是：

• vw：如 10vw 的意思是視窗寬度的 10%。
• vh： 如 3vh 的意思是視窗高度的 3%。
• vmin： 如 70vmin 的意思是視窗的高度和寬度中較小一個的 70%。
• vmax： 如 100vmax 的意思是視窗的高度和寬度中較大一個的 100%。