簡介:
響應式網頁設計會對所有的平台使用同一組 HTML,讓所有網站採用同一個網址架構


 
優點:
一個網址就能連到所有內容
簡化使用者體驗,使用者用來存取網站的裝置不同,解析度也不同
不需要重新導向
瀏覽網站的目的因裝置而異
 
省時省錢: 只需要維護一個網站
只需要一個網址 = 提升使用者體驗
便於維護: 修改CSS 就能更改網站在各個裝置上的顯示外觀
 
竅門:
不要讓小型螢幕的使用者下載原尺寸的圖片
 
使用者體驗:
不要小於最小觸碰/觸擊目標範圍 (48dp/8dp)
注意自行大小 (至少12px)
不要使用水平捲動 (最大320dp)
避免透過滑鼠懸停(將滑鼠游標停在某處)進行任何動作
不要使用彈出視窗
不要塞給使用者過多資訊
最佳化導覽方式並提供電腦版網站連結
確保 HTML5 與 Flash 影片都能播放
少用圖片式文字,並善用網頁字型
簡化付款程序
簡化下載程序

 
 
 
 
響應式網頁 CSS 程式碼開發:
 
1.媒體查詢
 
CSS 主要使用媒體查詢
媒體查詢不僅可以用來指定特定裝置類別,還能查看呈現網站的裝置具備哪些實體特徵
例如:
傳送不同的外觀程式碼給瀏覽器或印表機
根據顯示器的寬度或解析度使用不同程式碼
 
978px -電腦和大型平板電腦
600px -平板電腦,7吋左右的平板電腦
480px/320px -智慧型手機
 
@media screen and (max-width: 600px){
/* rules for narrower viewports */
}
 
2.Viewport Meta Tag
讓網頁更便於瀏覽,不需放大或重新呈現網頁
大多數行動電話瀏覽器都會呈現寬度800px以上的標準網頁,但這樣顯示的字體太小,需要放大才能樂讀
加入Viewport Meta Tag 可讓網站更便於閱讀
 

 
3.液態版面
文字自動重排reflow功能
絕不要對容器元素的寬度或高度屬性使用固定像素值,改用max-width 和min-height 一樣能達到目的
body {max-width:978px;}
.boxout {min-height: 200px}
 
4.用百分比設定欄寬度
用百分比定義欄和間距寬度,確保版面配置保持靈活
與其為欄指定像素寬度,更好的方式是改用百分比來設定欄和間距寬度,讓他們總和等於100%
.column {
float: left;
margin-right: 2%;
width: 32%;
}
 
.colium.last {
margin-right: 0;
}
 
5.不要使用水平捲軸
重排內容文字避免使用捲軸
有時候,圖片或其他網頁元素可能會堵塞到screen,可以用下列方法修正
 
img.iframe{
max-width: 100%;
box-sizing: border-box;
}
 
6.保留版面配置
內容溢出到容器外面,蓋掉了其他內容
有時候畫面寬度太窄會引發版面配置問題,請務必要查看網站在不同大小的視窗中顯示的樣子,確保忘站在小螢幕上也能正確顯示
加入Overflow屬性通常可以修正內容溢出的問題
 
.container { overflow: hidden;}
 
7.直線呈現欄和浮動內容
在較窄的畫面中垂直疊放浮動內容,確保內容清楚易讀
在窄小的畫面上閱讀偏窄的欄很吃力,只要把內嵌元素改成區塊或非浮動容器就能避免這個問題
用媒體查詢來觸發這類直線式內容式個好方法,但別忘了這個作法目前不適合IE8含以前的瀏覽器版本
 
@media screen and (max-width: 480px) {
div.li {
display block;
float: none;
width: 100%;
}
}
 
8.使用CSS多欄版本配置
在窄小畫面只使用單欄
運用CSS3 欄調整一般文字區塊中的行寬度,閱讀起來更便利
多數瀏覽器都支援這類功能;IE9含之前的舊版瀏覽器雖然不支援,但網站顯示並不會受影響。
.container {
column-count: 2;
column-gap: 32px;
}
 
@media screen and (max-width: 480px) {
.container {
column-count: 1;
}
}
 
9.放大導覽點擊區域
放大留白區域並直線呈現主要的導覽元素
密集的連結清單在觸控介面上並不容易操作,建議點擊區域的大小最好不要小於44平方向素。
與其用間距隔開連結清單項目,在錨點標記中加入留白區域並直線呈現較窄畫面上的清單是更好的作法。
 
@media screen and (max-width: 480px) {
#nav a{
display: block;
padding: 5px 10px;
}
}
 
10.移除不相關的內容
移除與行動裝置不相關的內容
許多使用者連上網站時所用的裝置竟較小,或是數據傳輸費率偏高,上網費用偏高
建議移除不必要的內容,網站在偏窄的螢幕上顯示時就不會顯示這些部分,這樣能避免使用者下載多餘內容
 
@media screen and (max-width: 480px) {
.optional {
display: none;
}
}
 
11.提高照片解析度
把圖片元素的原始解析度提高一被,確保圖片在行動裝置上也能清晰顯示
許多新是智慧型手機的原始解析度是電腦顯示器的2倍。為了讓圖片更清晰,可以把原始圖片的大小放大一倍,在用CSS將它縮小。
電腦版瀏覽器會顯示縮小後的照片,但在行動裝置上,圖片會以原始像素密度呈現。
h1 img { width: 200px;}
這個方式適用於標題中寬度為400像素的標誌,不需指定高度值。
注意事項: 行動適用者的資料傳輸量可能有限,請謹慎使用此技巧
 
三大心法:
行動裝置上呈現的每個網頁都必須易於閱讀
撰寫內容,然後看看它在每一種裝置上顯示的樣子
不論裝置或螢幕有多大,都絕對不要用水平捲軸
P_20140812

Tags: , ,