流式布局（百分比布局） 在CSS2時代就有，主要指的是將頁面中元素的寬度以百分比表示並進行排版，可以在不同分辨率下顯示相同的版式 響應式布局 關鍵技術是CSS3中的媒體查詢，可以在不同分辨率下對元素重新設置樣式（不只是尺寸），在不同屏幕下可以顯示不同版式 　　舉例 ...

基本的概念 一個網站可以兼容多個終端，針對不同終端設置不同的樣式。 優點： 面對不同分辨率設備靈活性強； 能夠快捷解決多設備顯示適用問題； 缺點： 兼容各種設備，效率低下； 代碼累贅； 實現響應式布局的三種方式 1. CSS3-Media Query ...

一、響應式布局概念： Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。 響應式與自適應的區別： 響應式布局：不管用戶使用的是什么設備都是在服務器把數據推送到瀏覽器后，腳本或CSS自行 ...

響應式布局的開發基礎知識 本章主要分為以下幾個部分 正確理解響應式設計 響應式設計的步驟 響應式設計需要注意的問題 響應式網頁布局實現原理 第一：正確理解響應式布局 響應式網頁設計就是一個網站能夠兼容多個終端-而不是為每個終端做一個特定的版本。打個比方來說：現在社會 ...

如果布局使用百分比寬度，在不同的顯示器上效果可能不太一樣。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。將固定像素寬度轉換對應的百分比寬度： 目標元素寬度/上下文元素寬度=百分比寬度 em代替px主要是為了文字縮放。針對老版本IE，現在瀏覽器支持縮放像素為單位的文字了。優點：1.使用 ...

響應式布局是一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本 @media all(用於所有的設備) || screen (用於電腦屏幕,平板電腦,智能手機等) and|not|only(三個關鍵字可以選) 1.meta 標簽 最簡單的處理方式是加上一個 ...

概念 Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。 步驟 1. 設置 Meta 標簽 大多數移動瀏覽器將html頁面放大為寬的視圖（viewport）以符合屏幕分辨率 ...

（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。 二、流動布局（fluid grid） ...