Responsive響應式佈局設計

時間  2019-11-08
標籤 responsive 響應 佈局 設計 简体版
原文   原文鏈接

響應式佈局介紹：

什麼是響應式佈局
一、服務器根據不一樣的瀏覽器用戶端，爲用戶呈現不一樣的頁面效果。
二、可讓一個網站兼容不一樣分辨率的設備，給用戶更好的視覺使用體驗。
三、移動互聯網催生了響應式佈局的誕生。css

響應式設計優缺點
優勢:html

  • 解決了設備之間的差別化展現,讓不一樣的設備達到最優的視覺體驗.
    缺點:android

  • 兼容性代碼多,工做量大,加載速度受影響css3

  • 對原有網站佈局會產生影響,用戶判斷未必精確.git

響應式設計的原則
1.移動優先：在設計的初期就考慮頁面如何在多終端展現
2.漸進加強：充分發揮硬件設備的最大功能github

如何實現響應式佈局

1.css3-Media Query：代碼簡單
2.藉助原生Javascript：主要用於老瀏覽器上，加載速度慢，不推薦
3.第三方的開源框架，如bootstrap，能夠很好的實現瀏覽器對響應式的支持bootstrap

CSS3-Media Query

在完全的瞭解Media Queries咱們須要瞭解其中的兩個重要部分，第一個是媒體類型，第二個是媒體特性。下面的內容咱們簡單的來了解這兩個部分：瀏覽器

媒體類型（Media Type）

媒體類型（Media Type）在CSS2中是一個常見的屬性，能夠經過媒體類型對不一樣的設備指定不一樣的樣式。
W3C總共列出了10種媒體類型。以下表所示：服務器

值 設備類型
All 全部設備
Braille 盲人用點字法觸覺回饋設備
Embossed 盲文打印機
Handheld 便攜設備
Print 打印用紙或打印預覽視圖
Projection 各類投影設備
Screen 電腦顯示器
Speech 語音或音頻合成器
Tv 電視機類型設備
Tty 使用固定密度字母柵格的媒介，好比電傳打字機和終端

其中Screen、All和Print爲最多見的三種媒體類型。app

媒體類型的引用方法也有多種，常見的有：link標籤、@import和新增的@media幾種：

link方法
link方法引入媒體類型其實就是在link標籤引用樣式的時候，經過link標籤中的media屬性來指定不一樣的媒體類型。以下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" href="link.css" media="only screen and (max-width:480px)/*當屏幕分辨率小於等於480px才使用這個樣式*/「/>`

@import方法
@import能夠引用樣式文件，一樣也能夠用來引用媒體類型。

@import引入媒體類型主要有兩種方式，一種是在樣式中經過@import調用另外一個樣式文件；另外一種方法是在head></head>標籤中的<style></style>中引入，但這種使用方法在IE6~7都不被支持，如樣式文件中調用另外一個樣式文件時，就能夠指定對應的媒體類型。

@import url(reset.css) screen;

在<head>中的<style>標籤中引入媒體類型方法。

<style type="text/css">
    @import url(style.css) all;
</style>

@media方法
@media是CSS3中新引進的一個特性，被稱爲媒體查詢。在頁面中也能夠經過這個屬性來引入媒體類型。
@media引入媒體類型和@import有點相似也具備兩方式。
（1）在樣式文件中引用媒體類型：

@media screen {
   選擇器{/*你的樣式代碼寫在這裏…*/}
}

（2）使用@media引入媒體類型的方式是在<head>標籤中的<style>中引用。

<style type="text/css">
    @media screen{
    選擇器{/*你的樣式代碼寫在這裏…*/}
}
</style>

媒體特性（Media Query,也稱做設備特性）

Mddia Query：Media Type(判斷條件) + CSS(符合條件的樣式規則)
W3C共列出了13種CSS3中經常使用的媒體特性：
1
常見的屬性(媒體特性)：

  • device-width,device-height 屏幕寬高，物理

  • width,height 渲染窗口寬度，可視

  • orientation 設備方向，豎屏和橫屏展現的區別對待

  • resolution 設備分辨率,不一樣於像素

Media Queries使用方法
Media Queries能在不一樣的條件下使用不一樣的樣式，使頁面在不一樣在終端設備下達到不一樣的渲染效果。具體來講,Media Queries的使用方法以下。
@media 媒體類型 and （媒體特性）{你的樣式}

使用Media Queries必需要使用「@media」開頭，而後指定媒體類型（也能夠稱爲設備類型），隨後是指定媒體特性（也能夠稱之爲設備特性）。
媒體特性的書寫方式和樣式的書寫方式很是類似，主要分爲兩個部分，第一個部分指的是媒體特性，第二部分爲媒體特性所指定的值，並且這兩個部分之間使用冒號分隔。例如：
(max-width: 480px)
媒體特性是經過min/max來表示大於等於或小於作爲邏輯判斷，而不是使用小於（<）和大於（>）這樣的符號來判斷。

Media Queries在實際項目中經常使用的方式。
一、最大寬度max-width
「max-width」是媒體特性中最經常使用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：當屏幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。
二、最小寬度min-width
「min-width」與「max-width」相反，指的是媒體類型大於或等於指定寬度時，樣式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：當屏幕大於或等於900px時，容器「.wrapper」的寬度爲980px。
三、多個媒體特性使用
Media Queries可使用關鍵詞"and"將多個媒體特性結合在一塊兒。
當屏幕在600px~900px之間時，body的背景色渲染爲「#f5f5f5」，以下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

四、設備屏幕的輸出寬度Device Width
在智能設備上，例如iPhone、iPad等，還能夠根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。一樣的，對於屏幕設備一樣可使用「min/max」對應參數，如「min-device-width」或者「max-device-width」。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是「iphone.css」樣式適用於最大設備寬度爲480px，好比說iPhone上的顯示，這裏的「max-device-width」所指的是設備的實際分辨率，也就是指可視面積分辨率。

五、not關鍵詞
使用關鍵詞not是用來排除某種制定的媒體類型，也就是用來排除符合表達式的設備。換句話說，not關鍵詞表示對後面的表達式執行取反操做，如：

@media not print and (max-width: 1200px){樣式代碼}

上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小於1200px下全部設備中。

六、only關鍵詞
only用來指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。
其實only不少時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性的設備，正常調用樣式，此時就當only不存在；表示不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，由於其先會讀取only而不是screen；另外不支持Media Queries的瀏覽器，不管是否支持only，樣式都不會被採用。如

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中若是沒有明確指定Media Type，那麼其默認爲all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在樣式中，還可使用多條語句來將同一個樣式應用於不一樣的媒體類型和媒體特性中，指定方式以下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。

到目前爲止，CSS3 Media Queries獲得了衆多瀏覽器支持，除了IE6-8瀏覽器不支持以外，在全部現代瀏覽器中均可以完美支持。Media Queries在其餘瀏覽器中不要像其餘CSS3屬性同樣在不一樣的瀏覽器中添加前綴。

Responsive設計

什麼是響應式設計呢？維基百科是這樣對響應式做的描述：「Responsive設計簡單的稱爲RWD，是精心提供各類設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不一樣的設備中展示不一樣的設計風格。」從這一點描述來講，RWD不是流體佈局，也不是網格佈局，而是一種獨特的網頁設計方法。
響應式設計要考慮元素佈局的秩序，並且還須要作到「有求必應」，那就須要知足如下三個條件：

  • 網站必須創建靈活的網格基礎；

  • 引用到網站的圖片必須是可伸縮的；

  • 不一樣的顯示風格，須要在Media Queries上寫不一樣的樣式。

Responsive設計經常使用術語：

1.流體網格
流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每一個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據屏幕尺寸大小作出相對應的比例縮放。

2.彈性圖片
彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用於適應各類網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。

img {max-width:100%;}

爲每個斷點提供不一樣的圖片，這是一個比較頭痛的事情，由於Media Queries並不能改變圖片「src」的屬性值，那有沒有辦分法能夠解決呢？能夠參考一下下面的解決方法。使用background-image給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不一樣的圖片，而後經過Media Queries來控制這些圖片顯示或隱藏。
來看一個斷點解決圖片自適應的例子。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

對應的CSS代碼：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

 請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。並不太實用。

3.媒體查詢
媒體查詢在CSS3中獲得了強大的擴展。使用這個屬性可讓你的設計根據用戶終端設備適配對應的樣式。這也是響應式設計中最爲關鍵的。能夠說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢能夠根據設備的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。

4.屏幕分辨率
屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，好比說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。所以屏幕分辨率在Responsive設計中是一個很重要的東西，由於只有知道Web頁面要在哪一種分辨率下顯示何種效果，才能調用對應的樣式。

5.主要斷點
主要斷點，在Web開發中是一個新詞，但對於Responsive設計中是一個很重要的一部分。簡單的描述就是，設備寬度的臨界點。在Media Queries中，其中媒體特性「min-width」和「max-width」對應的屬性值就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次要斷點，建立媒體查詢的條件。而每一個斷點會對應調用一個樣式文件（或者樣式代碼），以下圖所示：
2
綜合下來，設置斷點應把握三個要點：知足主要的斷點；有可能的話添加一些別的斷點；設置高於1024的桌面斷點。

Responsive佈局技巧

在Responsive佈局中，能夠毫無保留的丟棄：
第一， 儘可能少用可有可無的div；
第二，不要使用內聯元素（inline）；
第三，儘可能少用JS或flash；
第四，丟棄沒用的絕對定位和浮動樣式；
第五，摒棄任何冗餘結構和不使用100%設置。

Responsive設計——meta標籤

在響應式設計頁面中，須要插入meta標籤。
meta標籤被稱爲可視區域meta標籤，其使用方法以下。

<meta name=」viewport」 content=」」 />

在content屬性中主要包括如下屬性值，用來處理可視區域。
3
在實際項目中，爲了讓Responsive設計在智能設備中能顯示正常，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上，能夠經過這個可視區域的meta標籤進行重置，告訴他使用設備的寬度爲視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置以下：

<meta name=」viewport」 content=」width=device-width,initial-scale=1.0」 />

另一點，因爲Responsive設計是結合CSS3的Media Queries屬性，才能盡顯Responsive設計風格，但你們都清楚，在IE6-8中徹底是不支持CSS3 Media。
爲了讓IE6-8支持Media Queries屬性，頗有必要在IE9如下的瀏覽器中加上如下腳本：

<!—[if lt IE9]>      
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 ​<![endif]>

腳本下載地址： 
media-queries.js
respond.js

Responsive設計——不一樣設備的分辨率設置

下面咱們一塊兒來看看CSS3 Meida Queries在標準設備上的運用，你們能夠把這些樣式加到你的樣式文件中，或者單首創建一個名爲「responsive.css」文件，並在相應的條件中寫上你的樣式，讓他適合你的設計需求：
1.1024px顯屏

@media screen and (max-width : 1024px) {                    
  /* 樣式寫在這裏 */          
  }

2.800px顯屏

@media screen and (max-width : 800px) {              
/* 樣式寫在這裏 */          
}

3.640px顯屏

@media screen and (max-width : 640px) {              
/* 樣式寫在這*/            
}

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {/* 樣式寫在這 */            
}

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {
 /* 樣式寫在這 */            
}

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) { 
    /* 樣式寫在這 */            
}

Bootstrap框架-響應式佈局

主要是運用grid(柵格佈局)，button組件，navbar組件，Dropdown組件等來佈局網站。
twitter的Bootstrap第二版本中就加上了這方面的運用。

@media (max-width: 480px) { ... }              
@media (max-width: 768px) { ... }              
@media (min-width: 768px) and (max-width: 980px) { ... }      
@media (min-width: 1200px) { .. }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程