靜態佈局，自適應佈局，流體式佈局，響應式佈局概念

時間 2019-11-16

標籤靜態佈局自適應流體響應概念欄目網站開發简体版

原文原文鏈接

480px如下，480px-640px,640px-1024px,1024px以上html

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

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(安排，排列)ui

靜態佈局：元素不變的佈局。spa

佈局特色：設計

窗口縮小後內容被遮擋時，拖動滾動條顯示佈局code

設計方法：htm

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>流體，其中的元素都是靜態的

手機：相對屏幕寬度設定，佈局不變，是流體式設計

各類佈局經典代碼