近年來，智慧型手機變得如此流行，這已成為過去，現在它已經融入了我們的日常生活，很難找到沒有智慧型手機的人。截至2018年，20至30歲族群的智慧型手機普及率已達到90％以上，即使在10多歲和40多歲的人群中，也有近80％的人擁有智慧型手機。
根據 LINE 的一項調查 (2017)，85% 的人在智慧型手機上使用網路。此外，僅使用智慧型手機的使用者數量也接近一半，達到 46%。相較之下，TP3T 純 PC 用戶僅有 71 名。如今，智慧型手機是最受歡迎的網路存取設備。
智慧型手機已被視為網路使用的主流形式。儘管這取決於網站的內容，但可以肯定地說，超過一半的訪客是透過智慧型手機瀏覽的。
當然，您的網站設計必須考慮智慧型手機的瀏覽情況。截至 2019 年，最受歡迎的製作方法是響應式網頁設計。
響應式設計不僅適用於行動設備
說我們正在談論智慧型手機的響應式設計似乎有點突然，但響應式設計並不是一種「為了」相容智慧型手機的方法。這是一種根據環境（螢幕尺寸）對單一內容進行最佳化顯示的技術。
響應式設計的特點是可以適配各種設備，包括小螢幕和大螢幕，因此在智慧型手機上也可以使用。
因此，如果網站針對智慧型手機進行了最佳化，但不適合在平板電腦上瀏覽，那麼它就不能稱為響應式網站。
它也是一種“方法”，而不是一種“技術”。有多種技術可用於實現響應性，並且需要根據需要進行組合。它並不涉及任何特定的技術。
響應式設計的好處
相容於所有設備，包括未來的設備
響應式設計的主要優點是（理想情況下）支援“未來將出現的新設備”重點是，這是可能的。
大多數智慧型手機的視窗（顯示寬度）為 360px，而 iPhone 則為 375px 或 414px。如果頁面回應正常，則應該能夠在解析度為 380px 或 424px 的裝置上查看它，而不會造成任何設計損失。
簡單地將寬度固定為 360px 或 375px 並切換設計並不是響應式設計。
易於管理
在翻蓋手機鼎盛時期，創建與 PC 版本不同的行動版本頁面是很常見的。無論是不同的 URL 還是在伺服器端切換內容，我們都是在專門為行動裝置建立頁面。
早期手機相容也是透過類似的方式實現的，先建造一個手機頁面，然後再切換到PC版。當然，還是有一些網站提供針對智慧型手機的頁面。
這種方式會導致一個頁面存在多個HTML頁面，管理起來比較困難。有可能您更新了一個但忘記更新另一個。使用 CMS 可以在一定程度上避免這種情況，但仍需要努力管理多個檔案。
如果它是響應式的，則每個頁面只有一個 HTML，因此更新很容易。即使使用PHP建構的頁面，也不需要準備多個文件。
響應式設計的缺點
內容無法分離
響應式設計不是讓你在PC上有特定的佈局，而是讓你在智慧型手機上有簡化的佈局。正如我們已經提到的，響應式設計是一種針對不同裝置最佳化單一內容的技術。本來的目的不一樣。
響應式 CSS 展示 您可以透過更改值來開啟或關閉顯示，但它只是看起來消失了；資料本身仍在下載。不宜使用過多。
如果您期望在 PC 和智慧型手機上看到的內容有很大差異，那麼您首先應該建立單獨的頁面。
難以製造
這需要 HTML 和 CSS 方面的豐富知識和技能。如果只了解「使用媒體查詢切換顯示」的基礎知識，則很難建立正確回應設計的頁面。
此外，製作完成後的樣式表管理也很困難。例如，如果將樣式新增至 CSS 檔案的最末尾，它可能會影響智慧型手機和 PC，導致設計崩潰。
實現響應式設計的關鍵技術
媒體查詢
這是一種根據環境改變所應用的 CSS 的機制，已經存在很長時間了（它被稱為媒體規則）。例如，在 CSS 中
@media 列印 { img { 顯示：無； } }這不會列印圖像。
它的擴展是媒體查詢，它允許您根據設備的類型以及設備的特性來更改所應用的 CSS。
例如，
@media 螢幕和（最大寬度： 375px）{ h2 { 顏色： 紅色； } }如果你這樣寫，當顯示寬度為 375px 或更小時，氫鍵 到 顏色：紅色 適用。
決定切換的寬度稱為斷點。透過適當設定這些斷點並改變樣式，您可以實現回應能力。
流動佈局
這是一種佈局根據顯示區域寬度而變化的設計技術，不會出現內容溢出或設計折疊的情況。許多 寬度: 50% 這可以透過將寬度指定為百分比來實現，如下所示：
我覺得它曾經很流行，但製作起來卻很困難。現在，透過組合媒體查詢，可以輕鬆切換到固定寬度，從而使創建變得更加容易。
響應式影像
前兩個主要涉及 CSS，但這個涉及 HTML。您可以根據螢幕解析度和顯示寬度變更要顯示的影像。有兩種方法可以做到這一點。
解析度切換
每張圖片都預先準備了多種分辨率，可以根據裝置切換影像。
例如，
<img srcset="cat.jpg 960w, cat@640.jpg 640w, cat@320.jpg 330w" sizes="(max-width:767px) 360px, 960px" src="cat.jpg" alt="かわいい猫">這 <img>如果顯示寬度為 767px 或更小，則標籤將以 320px 顯示影像，否則以 960px 顯示影像。
在 iPhone 8 上查看時，我們希望圖像以 320px 顯示，但由於 iPhone 8 的裝置像素比（代表 1 個像素的點數）為 2，因此 320px x 2 = 640px，因此將下載 cat@640.jpg。 960p 的 cat.jpg 和 320px 的 cat@320.jpg 將不會被下載。
這樣做的好處是可以加快顯示速度，並透過避免下載不必要的大圖像來減少資料使用。
此外，最佳圖像寬度是在客戶端（瀏覽器）端計算和請求的，因此無需在伺服器端執行任何操作。你只需要準備相應的文件。
藝術指導
這也可以在多幅影像之間切換，但與基於解析度的方法不同，它使用媒體查詢進行切換。
<picture>
<souce srcset="cat_sp.jpg" media="(max-width:767px)">
<souce srcset="cat_tab.jpg" media="(max-width:959px)">
<img src="cat.jpg" alt="かわいい猫">
</picture>在這個範例中，如果寬度為767px或更小，則顯示cat_sp.jpg，如果寬度為959px或更小，則顯示cat_tab.jpg，否則顯示cat.jpg。當您想要在 PC 和平板電腦上顯示水平影像，但在智慧型手機上顯示方形影像時使用此選項。
這也可以與解析度切換相結合。
製作過程
到目前為止，我們一直在談論響應性作為使頁面與智慧型手機相容的一種手段，但在實際創建具有響應式設計的頁面時，使智慧型手機設計與 PC 相容通常更容易。
換句話說，
/* 基本樣式 */ ... @media screen and (max-width: 959px) { /* 平板電腦樣式 */ ... } @media screen and (max-width: 767px) { /* 移動樣式 */ ... }
與其這樣做，
/* 基本樣式 */ ... @media screen and (min-width: 768px) { /* 平板電腦樣式 */ ... } @media screen and (min-width: 960px) { /* PC 樣式 */ ... }
^這樣做比較容易。
如果您建立基於智慧型手機的網站，那麼您首先不需要擔心智慧型手機的相容性。它從一開始就相容於智慧型手機。
當顯示寬度較小時，複雜的佈局難以看清，因此最好採用相對簡單的佈局。另一方面，更大的寬度可以容納更複雜的佈局。
從簡單的事情開始，然後使其變得更複雜，比修復複雜的事情並使其變得簡單要容易得多。
最後
我盡量避免深入的技術討論，只是對響應式設計進行了粗略的解釋。在這個時代，擁有一個相容行動裝置的網站不再只是重要，而已經成為一種必然。
響應式設計是現今網頁開發的必需品！ 我們希望它可以在各種設備上舒適地觀看，無論大小。
但做起來相當困難。
