響應式網頁設計，毫無疑問地變得越來越重要了。如果你還沒聽說過響應式設計，可以先看看我之前發的文章響應式**。對新手來說, 響應式設計聽起來可能會有點複雜, 但事實上，它比你想象的簡單得多。為了讓你能快速入門，我準備了乙個簡易的教程。通過這三個步驟，你一定可以了解響應式設計的基本原理和media query（在你有一些css基礎的前提下）。
第一步. meta 標籤 (檢視 demo)
為了適應螢幕，多數的移動瀏覽器會把html網頁縮放到裝置螢幕的寬度。你可以使用meta標籤的viewport屬性來設定。下面的**告訴瀏覽器使用裝置螢幕寬度作為內容的寬度，並且忽視初始的寬度設定。這段**寫在 裡面
1<metaname="viewport"content="width=device-width, initial-scale=1.0">
ie8及以下的瀏覽器不支援media query。你可以使用media-queries.js 或 respond.js 。這樣ie就能支援media query了。
1 2 3
第二步. html 結構
這個例子裡面，有header、content、sidebar和footer等基本的網頁布局。 header 有固定的高180px，content 容器的寬是600px，sidebar的寬是300px。
第三步. media queries
css3 media query 響應式網頁設計的關鍵。它像乙個if語句，告訴瀏覽器如何根據特定的螢幕寬口來載入網頁。
如果螢幕視窗小於980px，下面的規則就生效。在這裡，我設定了容器的寬度為百分比的形式而不是畫素單位，這樣會更加靈活。
如果螢幕視窗小於700px， 定義 #content 和 #sidebar 為自適應寬度，並移除它的浮動屬性，這樣它會全屏顯示。
結論
這個教程的目的是展示響應式設計的基本原理。如果你要更加深入的學習，檢視這個： responsive design with media queries.
iPhoneX響應式網頁設計教程
iphonex響應式網頁設計教程，iphone x正式發售了。隨之而來的是乙個新的白色線條，幸福地坐在底部的觸控板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。頂部的黑色凹槽採用了許多最先進的技術 紅外攝像頭 環境感應器 光感感測器等 所有這些都是用來支援面部識別的。iph...
響應式網頁
1.將width改為max width，來適應螢幕的變動來改變自身寬度等。其他亦然。查詢，參考部分bootstarp框架 當頁面大於1200px時，大螢幕，主要顯示pc端 media min width 1200px 在992 和1199 畫素之間的螢幕裡，中等螢幕，解析度低的pc media mi...
響應式網頁
做響應式網頁需要注意 1.使用百分比來代替固定長度 2.當你需要在較大解析度下得到固定寬度時，使用max width而不是width，因為他可以適應較小的解析度 3.不要忘記給替換元素 eg.img,object,video,iframe 設定乙個max width，值為100 4.背景圖鋪滿整個容...