<meta
name
="viewport"
content
="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
user-scalable = no 屬性能夠解決 ipad 切換橫屏之後觸控才能回到具體尺寸的問題
假如乙個終端的解析度小於 980px，可以這樣寫：
@media screen and (max-width: 980px) #content #footer }
這裡的樣式就會覆蓋上面已經定義好的樣式。
假如要設定相容 ipad 和iphone的檢視，可以這樣設定：
/** ipad *
*/@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iphone *
*/@media only screen and (min-width: 320px) and (max-width: 767px) {}
（1）寬度需要使用百分比
（2）處理縮放的方法
可以使用百分比，但這樣不友好，會放大或者縮小。
可以嘗試給指定的最大寬度為百分比，假如超過了，就縮小；假如小了，就原尺寸輸出。
img
用::before和::after偽元素 +content 屬性來動態顯示一些內容或者做其它很酷的事情，在css3中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 html 自定義屬性的功能： html 結構：
alt="響應式布局"
css控制：
@media (min-device-width:600px) }@media (min-device-width:800px) }
（3）其他屬性
例如pre，iframe，video等，都需要和img一樣控制好寬度。對於table，建議不要增加 padding 屬性，低解析度下使用內容居中：
table th, table td
響應式布局一
所謂響應式布局就是針對不同解析度的裝置，可以呈現出不同的布局效果。如乙個 在pc上呈現一種布局效果，在pad上呈現的是一種布局效果，而在手機上所呈現的又是另一種布局效果。這種不同分別率裝置上呈現不同效果的布局方式就是響應式布局。css3為響應式布局提供了良好的支援，下面通過乙個簡單的例子來簡單學習一...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局初始 一
響應式布局是為了實現網頁頁面適應各種裝置螢幕，如手機印表機等各個不同的終端。查詢模組 查詢 media queries 查詢主要包括兩個重要的內容 型別和 特性 型別 指定的值 型別描述 all所有的 裝置 screen 顯示器 手機 平板等裝置 print 印表機或者列印預覽檢視 speech 螢...