響應式網站設計的3個基本原理

2014-05-05 分類：響應式網站

響應式網站設計的3個基本原理，你必須掌握，幾年前，這是比較容易設計和建立網站。網站比較簡單，并在屏幕尺寸變化不大觀看在臺式機和筆記本電腦。今天接管觀眾的瀏覽時間的移動設備，智能手機屏幕，平板手機，平板電腦，你如何正確地確保您的網站上顯示整個設備類型和屏幕尺寸？

成都網站制作該解決方案最初是他探索的方式，使網站設計響應，即讓他們根據屏幕大小而改變。一個自適應網站設計是使巧用CSS來保證網頁在寬屏幕尺寸范圍渲染以及 - 而不訴諸URL重定向或動態提供不同的HTML和CSS代碼，這取決于用戶代理。它不是一個真正的技術或標準，而是一組設計原則有助于實現的結果。

響應式網站設計的3個基本原理

在過去的幾年里，許多響應模板，CSS框架和WordPress主題如雨后春筍般涌現。這是，例如，有可能創造一個WordPress的響應網站，而無需編寫一行代碼。

但是，一個真正的網頁設計師并不滿足于僅僅使用模板。她會作出努力來理解響應網頁設計的元素，為了有效地使用它們。
所以今天，我們要看看你需要掌握三個基本技巧，你是一個有效的響應設計師。
1.媒體查詢
媒體查詢讓您可以為不同的媒體類型，如屏幕，平面，電視，手持設備等。根據媒體類型設計不同的布局，可以配置風格，字體和頁面的其他元素。
在CSS3介紹，媒體查詢讓設計師定制內容的呈現，以適應輸出設備類型的特定范圍。它們由一個媒體類型聲明和一個或多個媒體功能計算結果為真或假的表達式。
媒體類型的范圍包括手持，屏幕，電視，打印和投影。媒體功能包括，但不限于設備的高度，寬度，縱橫比，分辨率，顏色指數以及高度，在瀏覽器窗口的寬度。
讓我們一個基本的例子;想象一下你希望你的文字大小縮小在較小的設備，如手機。該查詢看起來是這樣的：

響應式網站設計的3個基本原理
現在，你的段落的字體大小將被設置為1EM，除非瀏覽器寬度小于400像素，在這種情況下，它會收縮到0.8em。
根據我的經驗，設計一個響應式網站布局的方法是先創建一個默認的主樣式表的主要結構元素。然后你就可以在媒體查詢添加到自定義基于布局或其他設備元素的元素。如果它比規則屈指可數，這可能是把它們搬出來獨立的子板 - 你可以選擇稍后加載。下面是如何將工作：

此片的代碼檢查裝置是否處于與設備橫向模式手持寬度小于720像素，如果是這樣，它加載tablet_layout.css樣式表。
注意，該特征的寬度，高度，大/最小寬度，最小/大高度都是指在瀏覽器窗口的寬度和高度。該裝置的寬度和高度由設備寬度，設備高度，最小/ MAX-設備寬度，最小/ MAX-設備高度控制。如果您想查找更多的例子使用媒體查詢MDN具有良好的一輪上漲。
響應式網站設計的3個基本原理
2.流體網格
“流體格”是用來描述在各種元件，而不是具有固定像素值的相對比例編碼的布局的術語。
傳統的CSS布局使用固定寬度網格的元素的位置。固定寬度的方式不再現在我們有設備屏幕從3英寸到幾英尺今天的工作原理。在流體格的設計，都是編碼在其相對比例在基座元件的角度，即，而不是指定的高度和每個元素的寬度;它被賦予一個百分比或相對大小。
想象一下，你有四列。為了使這種液體，而不是指定每個200像素寬，你必須指定它們0.2083％（即作為九百六十零分之二百）。至少，這是原則。創建一個全新的流體電網需要很在意。這是一個罕見的情況下，我寧愿建議使用自定義的工具之一。微型流體電網，變網格系統與流體基線網格是從頭開始編寫自己的流體網格一些偉大的替代品。
響應式網站設計的3個基本原理
3.靈活IMAGES
圖像被視為靈活，當圖像中本地的大小呈現，只要HTML容器支持它，但是當瀏覽器窗口縮小，圖像縮放以適應它。
即使設計的其余部分是流暢性和響應，它不會渲染好了，如果所有的組件不擴展。這可能很麻煩圖像和視頻。一個700像素寬的圖像會很好看在桌面上，但在一個320像素的平板電腦觀看時得到剁掉。大多數現代設計響應使用的CSS大寬度屬性，以使圖像的規模。（此方法首先由理查德•巴特勒提出）。