web響應式設計的基本技巧有哪些

這篇文章主要介紹“web響應式設計的基本技巧有哪些”，在日常操作中，相信很多人在web響應式設計的基本技巧有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web響應式設計的基本技巧有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、保持一個簡單的布布局

布局是一個在簡單不過的問題了，也是每個網頁設計中必須包含的部分，但我們使用Responsive設計***步要做的事情就是讓你的頁面布局盡量的簡單。實現一個簡單的布局，我們有一些小技巧：

Responsive布局技巧

在Responsive布局中，我們可以毫無保留的丟棄：

1.盡量少用無關緊要的div

2.不使用內聯元素(inline)

3.盡量少用js或flash

4.丟去沒用的絕對定位和浮動樣式

5.屏棄任何冗余結構和不使用100%設置

有舍才有得，丟去了一些對Responsive有影響的東東，那么有哪些東東能幫助Responsive確定更好的布局呢？

1.使用HTML5 Doctype和相關指南

2.重置好你的樣式（reset.css）

3.一個簡單的有語義的核心布局

4.給重要的網頁元素使用簡單的技巧，比如導航菜單之類元素

使用這些技巧，無非是為了保持你的HTML簡單干凈，而且在你的頁面布局中的關鍵部分（元素）不要過分的依賴現代技巧來實現，比如說css3特效或者js腳本。

說了這么多，怎么樣的一個布局或者說HTML結構才是簡單干凈的呢？這里教大家一個快速測試的方法：

你首先禁掉你頁面中所有的樣式（以及與樣式相關的信息），在瀏覽器中打開，如果你的內容排列有序，方便閱讀，那么你的這個結構不會差到哪里去。

二、使用Medial Queries

Medial Queries在CSS3中得到很大的擴展，如果你不太了解Medial Queries是什么？建議你先狠狠點擊這里進行了解。而且Medial Queries在Responsive中扮演著一個非常重要的角色，可以說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說Medial Queries是一個媒體查詢，可以根據設置的尺寸，查詢出適配的樣式。我們回過頭來想，Responsive設計最關注的就是寬度：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。

那么Medial Queries要怎么使用呢？有幾種調用的方式，詳細的也可以閱讀這里.

/*import 導入法*/ <style>    @import url(tiny.css) (min-width:300px);    @import url(small.css) (min-width:600px);    @import ulr(big.css) (min-width:900px);  </style>  /*直接寫在樣式文件中*/ @media screen and (max-width:300px) {    /*Tiny styles*/ }  @media screen and (max-width: 600px) {    /*small styles*/ }  @media screen and (max-width:900) {    /*big styles*/ }

上面只是一種簡單的使用方法，其實Medial Queries很簡單，你可以為Responsive制定一些常用的模板，例如：

@media only screen and (min-width: 320px) {     /* Small screen, non-retina */  }   @media  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),  only screen and (                min-resolution: 192dpi) and (min-width: 320px),  only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {      /* Small screen, retina, stuff to override above media query */  }   @media only screen and (min-width: 700px) {     /* Medium screen, non-retina */  }   @media  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),  only screen and (                min-resolution: 192dpi) and (min-width: 700px),  only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {      /* Medium screen, retina, stuff to override above media query */  }   @media only screen and (min-width: 1300px) {     /* Large screen, non-retina */  }   @media  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),  only screen and (                min-resolution: 192dpi) and (min-width: 1300px),  only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {      /* Large screen, retina, stuff to override above media query */  }

更詳細的Medial Queries模板介紹，可以點擊這里閱讀。

這個時候你可能并不關心里面的樣式文件怎么寫，而更關心的是這樣的尺寸我要怎么來定，如果你夠仔細的話，從上面例的模板代碼能找到一點的答案，那么我這里從別的地方截了和張圖，放在這里以供大家參考：

三、定義斷點

定義斷點，那么斷點是什么？簡單的描述就是，設備寬度的臨界點，也就是前面大家比較關心的Medial Queries中的min-width和max-width值是什么？那么在Responsive設計中，常見的斷點有六種，我們今后的Medial Queries條件判斷就可以根據這六個斷點來定。

主要的有：

1. ***個斷點群體就是針對于智能手機設置，他的寬度是小于480px(

2. 第二個斷點是高智能移動設備，比如說Ipads設備，他的寬度是小于768px（

3. 第三個斷點就是針對于大設備，比如說PC端，他的寬度是大于768px(>768px)

為了***一些，我們還可以添加另外幾種斷點：

1. 添加一個小于320px的斷點，針對于小型的移動設備；(

2. 還可以添加適用于平板設備的斷點，大于768px小于1024px(>768px 和

3. ***還可以為超寬的桌面設置一個斷點，大于1024px(>1024px)

綜合下來，設置斷點把握三個要點：

1. 滿足主要的斷點；

2. 有可能的話添加一些別的斷點；

3. 設置高于1024px的桌面斷點

如下圖所示：

四、讓你的布局更靈活

斷點確認了，接下來要讓你的布局更具靈活性。這里推薦使用flexible grids來布局，相對于固定寬度布局而言，Flexible grids能讓你的布局更適應于viewport的尺寸大小。而整個flexible grids中流體布局（也就是大家常說的自適應布局、液體布局、百分比布局）最適合各種類弄屏幕大小，結合正確的medial Queries，你可以制作出適應于任何可能出現的設備頁面布局。

來看一個簡單的對比圖

使用流體布局，有一個小技巧注意，為了讓瀏覽器計算小數點的四舍五入的問題，影響頁面布局，所以你的百分比小數位盡量多取一些位數，（如果你有看 bootstrap的源碼，你就能很明顯的看到他的百分比布局，小數點后面精確到十多位）。當然大家對這個數值不好把握的話，可以使用現成的網格系統，

1. 30+ CSS Grid System(這里搜集了近40個不同網格系統的介紹)

2. 8個實用的響應式設計框架（這里搜集了15個具有responsive設計的網格框架系統）

流體布局是方便，但是苦于的是，如果在設置了流體寬度值的元素上添加padding和border，那就兇險了，這個你懂的（css box module）有介紹：

那有沒有可解決的方法？方法是有的，早期是在設置寬度的元素內嵌套一個div，并將padding和border設置在這個內嵌元素上，這樣就多增加了一個額外標簽，其實在CSS3中有一個更好的方法，就是使用box-sizing來改變box module的默認模型。

舉個例子，我們有一個“div”元素：他的寬度是67%，而且需要設置一個15px的內距padding和3px的邊框border。Box module此時默認的寬度是：

div寬度=67% + 2*15px + 2*3px

這樣一來造成web頁面總布局的寬度大于100%；從而撐破了web的布局，為了讓這個div不在改變box module的寬度，也就是說，不管他的padding和border設置的是何值，而其width永遠不變，還是“67%”，那么我們就需要使用 box-sizing來改變，這樣一來，我們可以在樣式表中這樣設置：

*{    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    -o-box-sizing: border-box;    -ms-box-sizing: border-box;    box-sizing: border-box;  }

五、圖片的自適應

布局實現自適應不難，那么圖片怎么做到呢？也就是說我的一張圖片，有什么方法可以讓他在不同的設備上顯示能根據屏幕大小自適應，處理這種效果有一個方法，如果你的web頁面不會受到帶寬寬的影響（不考慮性能），你可以先制作一圖片讓其適合***屏幕，然后通過樣式來控制不同設備下顯示的大小；另外一種辦法就是你可以為每個斷點準備不同的圖片。

圖片自適應大小

使用樣式來控制圖片的自適應：

img {    max-width: 100%;  }

斷點圖片

為每一個斷點提供不同的的圖片，這是一個比較頭痛的事情，因為Medial Queries并不能改變圖片"src"的屬性值，那有沒有辦法可以解決呢？可以參考一下下面的解決方法：

1. 使用background-image:給元素使用背景圖片，

2. 顯示/隱藏父元素：給父元素使用不同的圖片，然后通過Medial 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);    }  }

六、別忘了min和max

在Responsive中有兩個關鍵詞也是非常的重要，“min-width”和“max-width”。這兩個屬性值能幫助你定義responsive臨界點的一個相對值。典型的好處：

1. 防止你的布局變大或變小

2. 結合液體布局，max-width和min-width在medial queries臨界點（斷點）能做到更好的適應性。

一起來看幾個簡單的運用：

液體布局中，如果你的寬度不小于768px，同時不大于1024px，那么我們就可以使用：

min-width: 768px;  max-width: 1024px;

比如“#main”元元素寬度不低于1000px的桌面上顯示，那么我們就可以這樣使用：

@media screen and (min-width: 1024px) {      #main {min-width: 1000px;}  }

七、讓大部分東西是相對的

讓你整個Web元素都是相對的而不是絕對的，從這一個概念出發，我們可以給最外面的元素定義一個單位，然后其子元素和后代碼元素都繼承他。目前使用相對的單位有兩種常見的：

1. 百分比（%）方法：給主容器定認一個固定尺寸或者流體尺寸，然后給其每個子元素使用百分比（%）來計算各自的參數，比如說width/padding/margin等；

2. “em”單位：先在一個主容器中或者"<body>"中定義一個字體大小（font-size），把它做為基本單位，然后其他元素以此做為基準來計算出相關的值

“em”和“px”之間的轉換是有些技巧的，如果你從來沒有了解過他們之間的關系，我建議你先閱讀一下這篇文章《CSS中強大的EM》，簡單一點的，可以看看下圖：

八、移動端上的效果

在移動端設備，特別是小屏的移動手機上，所有的內容都將在一個列中顯示，這個時候，我們就需要對樣式進行一定的處理，首先來看一個布局的對比：

PC桌面上的layout

這樣的布局，在我們手機上將顯示成這樣：

那我們要怎么來實現這兩種布局的轉變呢？實現方法很簡單：只需要在你的mobile樣式表中覆蓋每一個元素的寬度，將原來的寬度轉換成“100%”

是不是我們需要在移動手機樣式中為每一個不重要的元素添加移去的樣式呢？其實不用，我們只需要在不重要的元素中添加類名“not_mobile”，然后在手機樣式中添加：

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

十、檢查你的viewport

玩過移動端的同學可能都知道，許多移動端的瀏覽器模擬了桌面PC機下瀏覽器，你的web頁面在移動端的瀏覽器瀏覽時，整個頁面會直接壓縮顯示在一個屏幕下。這可是一個強大的功能，但也是Responsive致命的一功能。

看一個我在網上截圖來的對比圖：

針對這種情況，我可以使用“meta”屬性來讓其顯示正常：

< meta name="viewport" content="width=device-width">

到此，關于“web響應式設計的基本技巧有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！