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

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技術的優質平臺!

抱歉!評論已關閉.

奔驰宝马破解版下载 胆拖投注怎么算 安徽福彩快3预测 去哪个平台买股票 广东26选5开奖软件 江西快3预测号码 1分钟快3开奖结果查询 福建体彩22选5开奖时间 2019年每月上证指数 青海快3开奖结果今天 点石杭州在线期货配资 广东十一选五任三计划 一码大公开免费送 股票是怎么涨跌的 广西快3遗漏统计值 大乐透开奖官网 新手入门怎么玩股票