網頁布局 響應式布局

響應式布局是

乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本

@media all(用於所有的裝置) || screen (用於電腦螢幕,平板電腦,智慧型手機等)  and|not|only(三個關鍵字可以選)

1

<
head
>
2<
style 
media
="screen"
>
3@media screen and (max-width:600px)7}
8@media screen and (min-width:600px) and (max-width:800px)12}
13@media screen and (min-width:800px)17}
18.con
22style
>
23head
>
24<
body
>
25<
div 
class
="con"
>
26乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本乙個**能夠相容多個終端---而不是為每個終端做乙個特定的版本
27div
>
28body
>

1.meta 標籤

最簡單的處理方式是加上乙個 meta 標籤設定螢幕按1：1尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。

其中，width = device-width 這一句的意思是讓頁面的寬度等於螢幕的寬度。

2.通過**查詢設定樣式media query

media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如乙個終端的解析度小於980px，那麼可以這樣寫:

1

@media screen and (max-width:980px)
3#content 
4#footer 
5}

意思就是： 當螢幕的寬度大於等於 980 px 的時候 html 設定樣式。

rem 指的是 html 元素的 font-size，html 元素的 font-size 預設是 16px，所以 1 rem = 16px；然後根據 rem 來計算各個元素的寬高，然後配合 media query 就可以實現自適應。

3.設定多種檢視

假如我們要相容ipad和iphone檢視，我們可以這樣設定：

1

/**ipad**/2
@media only screen and (min-width:768px)and(max-width:1024px){}3/*
*iphone**/4
@media only screen and (width:320px)and (width:768px){}

4.響應式設計需要注意的問題

4.1、寬度不固定，可以使用百分比

#head#content

img

自適應網頁 響應式布局 彈性布局

1.自適應網頁 1.宣告viewport元標籤 注 width device width 讓寬度為裝置寬度 initial scale 1 設定初始縮放比例 user scalable no 設定使用者是否可以手動縮放 2.使用流式布局 實現方案 float left display inline ...

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...