溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下響應式web設計的方法的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
大部分移動瀏覽器會把HTML頁面縮放成較寬的viewport的寬度，這樣內容就可以屏幕上正確的展示了。你可以使用viewport這個meta標簽來重置這個行為。下面的viewport標簽告訴瀏覽器使用設備寬度（device-width）做為viewport的寬度，并且禁用初始的縮放比例。在<head>中加入這個meta標簽。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8或者更老的瀏覽器不支持媒體查詢。你可以使用media-queries.js或者respond.js來在IE中添加對媒體查詢的支持。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
在這個例子中，我擁有一個由頭部，內容容器，側邊欄，以及一個底部構成的基本的頁面布局。頭部擁有一個固定的180px高度，內容容器600px寬，然后側邊欄是300px寬。
CSS3媒體查詢 是進行響應式設計的戲法。它跟寫if條件一樣，來告訴瀏覽器對于特定的viewport寬度如何渲染頁面。
下面的規則集在當viewport寬度小于等于980px的時候生效。基本上，我把所有容器的寬度從像素值改成了百分比值，這樣容器就會變得具有流動性(fluid)。
然后對于寬度小于或等于700px的viewport，指定#content和#sidebar為自動寬度，并且移除浮動，所以他們可以以全寬度進行展示。
對于寬度小于等于480px（移動設備屏幕）的，重置#header的高度為auto，修改h2的字體大小為24px，并且隱藏#sidebar。
你可以想寫多少媒體查詢就寫多少。我在demo中只展示了三個媒體查詢。媒體查詢的目的是對于指定的viewport寬度可以通過應用不同的CSS規則來獲得不同的布局。媒體查詢可以在同一個樣式表中或者在一個單獨的文件中。
以上就是“響應式web設計的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
