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

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

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

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

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

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