靜態布局,自適應布局,流體式布局,響應式布局概念


480px以下,480px-640px,640px-1024px,1024px以上

static:靜止的,不變的,not change or move  

adaptive:能適應的, having the ability or tendency(常發生的行為,傾向) to adapt to different situations.

liquid:像液體一樣流動的,非固定形狀和排列的

responsive:迅速積極反應的, quick and favourable(有利的) to react

layout:the way in which the parts are arranged(安排,排列)

靜態布局:元素不變的布局。

布局特點:

窗口縮小后內容被遮擋時,拖動滾動條顯示布局

設計方法:

PC:居中布局,所有樣式使用絕對寬度,高度

移動設備:另外建立移動網站,以m.域名為域名

自適應布局:創建多個靜態布局,每個靜態布局對應一個屏幕分辨率范圍

布局特點:

改變屏幕分辨率可以切換不同的靜態局部,在每個靜態布局中,元素不發生變化,相當於靜態布局的一個系列

設計方法:

使用媒體查詢功能

流體式布局:元素寬度按照分辨率寬度進行長度、寬度的調整,但布局不變

缺點:

如果屏幕尺度跨度過大,那么在相對原始設計而言過小或過大的屏幕上不能正常顯示

響應式布局:創建多個流體式布局,分別對應一個屏幕分辨率范圍

特點:

分別為不同的屏幕分辨率定義布局,同時,在每個布局中,應用流式布局的理念,即頁面元素寬度隨着窗口調整而自動適配

創建多個元素寬度是相對的的布局

 

理想的響應式布局是指的對PC/移動各種終端進行響應的

響應式布局基本樣式

兼容性和基本代碼

使用 respond.js解決IE6-IE8不支持CSS3的問題:<script src="respond.min.js">或者</script><script src="respond.src.js"></script>

先寫相同的大框架,部件等

html,body{

}

下面寫不同的布局

@media only screen and (min-width:480px) and (max-width:640px){

  body{

    background:yellow;

  }

}

@media only screen and (min-width:640px) and (max-width:1024px){

  body{

    background:blue;

  }

}

@media only screen and (min-width:1024px){

  body{

    background:blue;

  }

}

tumblr和qq空間:

tumblr分別為pc端和手機端制定了兩套布局

監測客戶端而不是分辨率,不同的客戶端使用不同的一套布局

pc:<body>流體,其中的元素都是靜態的

手機:相對屏幕寬度設定,布局不變,是流體式設計

各種布局經典代碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM