適應性設計和響應性設計之間的斗爭已經(jīng)存在了很長一段時間，這兩種技術都已嶄露頭角。但隨著時間的推移，互聯(lián)網(wǎng)在移動設備中的普及率越來越高，對響應式設計的重視也越來越高。響應式設計已經(jīng)成為當今網(wǎng)頁設計界的需要，設計師們需要學習響應式設計的基本準則和原則，以使網(wǎng)站具有現(xiàn)代感。

早些時候，當屏幕尺寸很大時，不管是筆記本電腦屏幕還是電腦顯示器，有一個適合這些屏幕的網(wǎng)站就可以幫你完成這項工作。但隨著移動計算的發(fā)展，從智能手表到平板電腦，屏幕尺寸從幾英寸到幾英寸不等，情況也發(fā)生了變化。因此，為了保證所有設備的統(tǒng)一用戶體驗，像Mind Metricks這樣的流行網(wǎng)站設計公司開始使用設計原則，在這些原則下，設備進行動態(tài)渲染工作。這是響應式設計的基礎。

什么是響應式設計？
響應式設計是一個由設備決定網(wǎng)站顯示方式的術語?！耙苿觾?yōu)先”的概念在這里起著至關重要的作用，因為體驗是在智能手機和平板電腦等移動平臺上確定的，然后擴展到更大的屏幕。
因此，當加載圖像時，它們會根據(jù)移動設備屏幕大小的包裝進行縮放。隨著屏幕尺寸的增大，包裝器的尺寸會增大，但圖像只會擴展到其最大分辨率，從而避免了大屏幕上的圖像失真。其結果是在所有設備上實現(xiàn)統(tǒng)一的圖形渲染。
與傳統(tǒng)的設計不同，響應式設計將無法容納側邊欄和廣告，這是典型的桌面網(wǎng)站所共有的。然而，它們的不可用使布局更簡單、更干凈，從而增強了吸引力。因此，響應式設計已成為流行的這些天。
響應式設計的主要原則：
由于響應性設計是在瀏覽器而不是服務器上呈現(xiàn)的，因此瀏覽器必須精確地使用CSS參數(shù)來完成工作。要獲得正確的渲染效果，需要遵循3個響應性設計原則：

流體網(wǎng)格系統(tǒng)：
打印圖形根據(jù)顯示器的大小進行設計。同樣的思想也在互聯(lián)網(wǎng)上使用像素。但是響應性設計原則回避了這一點，因為沒有機器渲染的空間。相反，它使用了相對大小的概念。最好用以下公式來描述：
目標大小/上下文=相對大小
因此，如果網(wǎng)站包裝器設計為顯示最大寬度為960像素的網(wǎng)站，而最大瀏覽器窗口寬度為1280像素，則相對大小計算為960/1280=75%
因此，在CSS腳本中，必須使用百分比來表示寬度，而不是像素，瀏覽器將為您完成這項工作。
流體圖像：
響應性設計需要使用占據(jù)屏幕的流體圖像。最好使用CSS命令：
img{最大寬度：100%；}
這只是告訴瀏覽器圖像寬度應該是像素值的100%。因此，即使屏幕變大，圖像也保持不變，這樣可以避免退化。對于較小的屏幕大小，CSS命令放在一個容器中，并根據(jù)其規(guī)格進行收縮。但是，在縮小的同時，您可能會觀察到像素密度的增加。為了防止這種情況，建議對圖像使用SVG格式。

媒體查詢：
這是聰明的使用CSS來改變網(wǎng)站的布局，只要滿足一定的條件。例如，兩列方法不會在大屏幕上顯示。因此，基于屏幕大小，CSS呈現(xiàn)是有計劃的，每個部分都使用一系列的“斷點”激活。這樣，你的網(wǎng)站就可以針對不同的屏幕，而無需你做任何事情。
因此，這些都是響應性設計原則，使設計變得簡單和智能，并將其交給機器渲染，從而使設備為您完成設計工作。

本文地址：http://www.gknaturalcreations.com/wangzhanjianshe/24-469.html