HTML+CSS編寫靜態網站-36 裝置適配概述

視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

在最近的幾個課時中，我們一直都在編碼，現在，讓我們來講解理論知識。

在過去幾年中，各種硬體裝置出現了爆炸式的增長。你可以購買桌上型電腦，膝上型電腦，平板電腦，智慧手機，智慧手錶，智慧電視等等。螢幕尺寸的各異。

那麼我們如何設法建立一個網站來適應所有螢幕的尺寸呢？

實際上，我們已經寫了很多程式碼。現在，我們的網站在較小的螢幕上最好看。接下來，我們可以進行一些小的修改，讓我們的網站在平板電腦上，在桌面上都非常好看。

我們的網站使用了一種稱為響應式網頁設計的技術。進一步說，我們採用了移動優先的方法來響應網頁設計。我們首先設計了網站的移動版本，而不是設計桌面版。

這是因為從簡入奢易，從奢入簡難，桌面的設計要比移動裝置複雜一些。

響應式網頁設計是一個重要的概念，讓我們來詳細看看。

開啟index.html，現在，這是我們網站的最新版本。如果我調整我們的網頁瀏覽器的大小，你會注意到，隨著瀏覽器的寬度的增加或減少，網站的佈局會彈性改變。這被稱為流體佈局。

目前，當頁面的寬度很窄，比如移動裝置，我們的頁面看起來不錯。但是，當該頁面非常寬時，就像在桌面裝置或平板電腦上一樣，這個頁面看起來就有些難看了。比如說，當寬度增到最大，導航標籤變得很小，不方便選擇，而相對於整體的頁面佈局來說，圖片又變得很大。那麼要實現修改，我們需要使用一種被稱為響應式網頁設計的技術，它是建立適應多裝置網站的最佳方式之一。響應式網頁設計不只是一項技術。相反，實際上，它是三個小步驟的集合，分三步， 第一步是建立流體影像。這很簡單，實際上，我們已經做了這個技術。開啟CSS，來到GENERAL下的img，您可以看到最大寬度設定為100％。

img{ max-width:100%; }

第二步是建立流體網格。我們在這個網站上並沒有使用網格，但我們的佈局依舊流暢。我們從一開始就通過使用百分比來定義元素的寬度而不是通過畫素。因為百分比是相對單位，它們會根據其父容器的寬度來更改寬度。因為一切都是相對的，所以我們在頁面上的巢狀元素會根據瀏覽器的相對寬度而改變。 第三步是使用一個稱為media query的特殊CSS規則。我們還沒有講解過media query，但他們將允許我們根據頁面的寬度來更改元素的佈局。 在接下來的幾節課時中，我們將新增多個media query，它將允許我們的佈局響應不同的螢幕解析度。 更多精彩內容盡在視訊中！ 本文固定連結：http://www.oxox.work/web/html-css/device-adapter/ | 虛幻大學

檢視原文：http://www.oxox.work/web/html-css/device-adapter/