<tbody id="xj1oc"></tbody>

    <bdo id="xj1oc"></bdo><bdo id="xj1oc"><optgroup id="xj1oc"><thead id="xj1oc"></thead></optgroup></bdo>

    現在的位置: 首頁 > 移動開發 > 正文

    Responsive設計有哪些技巧

    2020年06月10日 移動開發 ⁄ 共 3824字 ⁄ 字號 評論關閉

      什么是Responsive設計?有人認為Responsive設計是自適應布局,也有人認為Responsive是網格布局。其實這些想法都不正確。Wikipedia對Responsive做了詳細的描述,Responsive設計簡單的稱為RWD,是精心提供各種設備都能閱讀網頁的一種設計方法,RWD能讓你的網頁在不同的設備中展現成不同的設計風格。下面學步園小編來講解下Responsive設計有哪些技巧?

      Responsive設計有哪些技巧

      Responsive設計無疑是網頁設計中的一個熱門話題。某種程度上,他將是一個最受歡迎的網頁設計概念,因為隨著網站用戶日漸多樣化的訪問方法,比如說“iPad”、“iPhone”、“Android移動設備”、“平板電腦”、“臺式機”以及“ 筆記本”等不同形式的顯屏出現。這樣我們以前那樣的網頁設計就無法在適合上述各種設備的瀏覽,這也給我們后續的網頁設計提出了一個全新的設計概念Responsive設計。讓我們的網頁能適應各種平臺、各種設備上渲染。

      這個時候可能又有人會心生疑問,是不是Responsive是用來制作Mobile頁面的?這個問題我經常聽到有同學問?其實這是一個很簡單的問題,Mobile頁面和我們平時的頁面制作基本上是一樣的,只不過大小不一樣,其中稍有細節需要注意,從這一點出發,如果就Responsive設計是用來制作Mobile頁面并不妥,只能說Responsive設計能讓你的頁面在Mobile上顯示的更加完美。說到這,可能你會感覺到Responsive到底是什么?又怎么使用?我又要怎么學習呢?其實這些都不是問,接下來和大家分享一下學習或者說使用Responsive設計的一些基本技巧,以及對應的學習資源。

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

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

      Responsive布局技巧

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

      盡量少用無關緊要的div

      不使用內聯元素(inline)

      盡量少用js或flash

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

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

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

      使用HTML5 Doctype和相關指南

      重置好你的樣式(reset.css)

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

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

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

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

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

      擴展閱讀:

      Responsive Layouts, Responsively Wireframed

      Responsive Design 101

      A Simple Device Diagram for Responsive Design Planning

      Multi-Device Layout Patterns

      Beginner’s Guide to Responsive Web Design

      Create A Responsive, Mobile-First WordPress Theme

      Initializr

      5 Patterns To Rearrange Responsive Layouts

      二、使用Medial Queries

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

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

      /*import 導入法*/

      

      /*直接寫在樣式文件中*/

      @media screen and (max-width:300px) {

      /*Tiny styles*/

      }

      @media screen and (max-width: 600px) {

      /*small styles*/

      }

      @media screen and (max-width:900) {

      /*big styles*/

      }

      Responsive設計有哪些技巧

      上面只是一種簡單的使用方法,其實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 */

      }

      以上就是關于“Responsive設計有哪些技巧”的內容,希望對大家有用。更多資訊請關注學步園。學步園,您學習IT技術的優質平臺!

    抱歉!評論已關閉.

    黄色电影网址