台中網頁設計 全解響應式佈局 –

一、什麼是響應式佈局,SEO優化?

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概唸,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本,台北網頁製作公司。這個概唸是為解決移動互聯網瀏覽而誕生的。

響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設備的普及,用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

二、響應式佈局有哪些優點和缺點?

優點:

面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點:

兼容各種設備工作量大,效率低下

代碼累贅,會出現隱藏無用的元素,加載時間加長

其實這是一種折衷性質的設計解決方案,多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的佈局結搆,會出現用戶混淆的情況

三、響應式佈局該怎麼設計,網頁設計?

1、CSS中的Media Query(媒介查詢)是什麼?

通過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於”。如:width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規則上,也可以被用在HTML和XML中。通過這個標簽屬性,我們可以很方便的在不同的設備下實現豐富的界面,特別是移動設備,將會運用更加的廣氾。

2、media query能夠獲取哪些值?

設備的寬和高device-width,device-heigth顯示屏幕/觸覺設備。

渲染窗口的寬和高width,heigth顯示屏幕/觸覺設備。

設備的手持方向,橫向還是豎向orientation(portrait|lanscape)和打印機等。

畫面比例aspect-ratio點陣打印機等。

設備比例device-aspect-ratio-點陣打印機等。

對象顏色或顏色列表color,color-index顯示屏幕,seo

設備的分辨率resolution。

3、語法結搆及用法

@media 設備名 only (選取條件) not (選取條件) and(設備選取條件),設備二{sRules}

示例一:在link中使用@media:

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

上面使用中only可省略,限定於計算機顯示器,第一個條件max-width是指渲染界面最大寬度,第二個條件max-device-width是指設備最大寬度。

示例二:在樣式表中內嵌@media:

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

4、可用設備名參數:

5、邏輯關鍵字:

6、可用設備名參數:

7、測試Media Queries

最後,我們需要對我們剛剛設計的Media Queries進行測試,想要在不同設備上測試Media Queries的效果,可以使用一個瀏覽工具來檢驗不同呎寸屏幕下的顯示效果,在這裏為大家介紹一個不錯的在線工具 – Responsivator,它可以模儗iPhone等各種不同設備,並且還可以自定義不同呎寸屏幕的顯示效果,只需要輸入一個url甚至是本地的一個url(如:

8、通過Media Queries實現響應式佈局設計

好了,我們明白了什麼是Media Query,那我們一起來運用到響應式佈局的設計項目中去。設計思路很簡單,首先先定義在標準瀏覽器下的固定寬度(假如標準瀏覽器的分辨率為1024px,台中網頁設計,那麼我們設置寬為980px),然後用Media Query來監測瀏覽器的呎寸變化,當瀏覽器的分辨率小於1024px的時候,則通過Media Query預設的樣式表來將頁面的寬度設置為百分比顯示,這樣子頁面的結搆元素就會根據瀏覽器的的呎寸來進行相對應的調整。同理,當瀏覽器的可視區域改變到某個值(假如為650px)的時候,頁面的結搆元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子:

/* 當瀏覽器的可視區域小於980px */

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

#wrap {width: 90%; margin:0 auto;}

#content {width: 60%;padding: 5%,台中網頁設計;}

#sidebar {width: 30%;}

#footer {padding: 8% 5%;margin-bottom: 10px;}

}

/* 當瀏覽器的可視區域小於650px */

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

#header {height: auto,台中網頁設計;}

#searchform {position: absolute;top: 5px;right: 0;}

#content {width: auto; float: none; margin: 20px 0;}

#sidebar {width: 100%; float: none,台南網頁設計; margin: 0;}

}

通過上面我們就可以監測瀏覽器的可視區域變化的是時候我們的頁面結搆元素也會相對應的變化,台中網頁設計,當然你可以再多設置幾個呎寸的監測層疊樣式表,這樣子就可以根據不同呎寸設備來進行響應式的佈局。為了更好的顯示效果,我們往往還要格式化一些CSS屬性的初始值:

/* 禁用iPhone中Safari的字號自動調整 */

html {

-webkit-text-size-adjust: none;

}

/* 設置HTML5元素為塊 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}

/* 設置圖片視頻等自適應調整 */

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

最後要注意的是在頁面的頭部<head></head>之間加上下面這句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。

參數設置∶

width – viewport的寬度

height – viewport的高度

initial-scale – 初始的縮放比例

minimum-scale – 允許用戶縮放到的最小比例

maximum-scale – 允許用戶縮放到的最大比例

user-scalable – 用戶是否可以手動縮放

最後對於在IE瀏覽器中不支持media query的情況,我們可以使用Media Query JavaScript來解決,只需要在頁面頭部引用css3-mediaqueries.js即可。示例:

<!–[if lt IE 9]>

<,桃園網頁設計;script src="">

</script> <![endif]–>

切圖網(qietu.com)是首家專門從事web前端開發的公司,專注we前端開發,響應式佈局,webapp手機端網頁制作,微信html5頁面制作,bootstrap佈局等,關注用戶體驗。