我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap框架其實還做了其他事情以支援網頁響應式設計。現在，就讓我們一窺響應式網頁設計背後的原理。
實現響應式設計的前提:允許網頁縮放
視口的 meta 標籤，重寫了預設的視口，並幫助載入與特定視口相關的樣式。
width屬性設定螢幕寬度。它包含乙個值，比如 320，表示 320 畫素，或者值為 'device-width'，用來告訴瀏覽器使用原始的解析度。
initial-scale屬性是視口最初的比例。當設定為 1.0 時，將呈現裝置的原始寬度。
實現響應式設計的核心：css3的**查詢
自動探測螢幕寬度，選擇載入相應的css檔案。
常用於布局的css media queries有以下幾種
裝置型別(media type):
all所有裝置
screen電腦顯示器
print列印用紙或列印預覽檢視
handheld便攜裝置
tv電視機型別的裝置
speech語意和音訊盒成器
braille盲人用點字法觸覺回饋裝置
embossed盲文印表機
projection各種投影裝置
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端
裝置特性(media feature):
width瀏覽器寬度
height瀏覽器高度
device-width裝置螢幕解析度的寬度值
device-height裝置螢幕解析度的高度值
orientation瀏覽器視窗的方向縱向還是橫向，當視窗的高度值大於等於寬度時該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，螢幕的縱橫比
example:
/* for 240 px width screen */
@mediaonly screen and(max-device-width:240px)
}/* for 320px width screen */
@mediaonly screen and(min-device-width:241px)and(max-device-width:320px)
}/* for 480 px width screen */
@mediaonly screen (min-device-width:321px)and(max-device-width:480px)
}其他知識
1 css 不使用絕對寬度，而用百分比寬度
.p 2 字型不使用px為單位，改用em單位
3 針對不同寬度的裝置，實現的自適應載入
1.2.
3.
響應式網頁設計示例
若要全方位測試你自己或別人的響應式 則需要針對每一種裝置和不同的螢幕尺寸，分別準備不同的測試系統。儘管這是最完美的辦法，但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外，還有很多第三方外掛程式和瀏覽器擴充套件可供選擇，通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時，還可以自動將當...
iPhoneX響應式網頁設計
iphone x正式發售了。隨之而來的是乙個新的白色線條，幸福地坐在底部的觸控板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。頂部的黑色凹槽採用了許多最先進的技術 紅外攝像頭 環境感應器 光感感測器等 所有這些都是用來支援面部識別的。iphone x 的頂部凹槽 這也意味著...
響應式網頁設計與應用
posted by zoran liu on 九月 13th,20136 響應式web設計 responsive web design 理念是設計和開發應根據螢幕的大小 平台的使用者的行為和環境基礎上自動調整 他應該有乙個靈活的網格和布局，影象和css能夠智慧型的組合 使用。比如說使用者從電腦切換到...