響應式設計轉html三部曲

在前端開發中

1.想要網站兼容手機、平板電腦、pc，就得為不同的設備定制不同的版本。

2.想要網站的某些頁面在寬屏顯示器下一行顯示更多的內容，又得為寬屏定制一個版本。

3.很多人并不是在全屏的情況下瀏覽我們的頁面，如果讓頁面隨著瀏覽器寬度改變而相應的調整會不會比較好？

為了解決上述的問題，常用的解決方法——web響應式。

響應式的概念，網上到處都有，就不在累贅了，下面我們談談他的開發流程：

第一步：Meta標簽 查看mate標簽

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如我們定義個480px像素

<meta name="viewport" content="width=480" />

由于IE8或者更早的瀏覽器并不支持Media Query，就必使用media-queries.js或者respond.js來為IE添加Media Query支持。

<script src="js/css3-mediaqueries.js"></script>

第二步：HTML結構

制作一個簡單的頭部、側邊欄、內容、尾部的的結構，頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素

第三步：媒介查詢-Media Queries

CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。下面的代碼分別是針對980px、700px、480px的情況生成的響應。

/*當視圖寬度為小于等于980像素時，如下規則將會生效。*/

@media only screen and (max-width:980px ) {

#pagewrap {

width:94%;

}

#content {

width: 65%;

}

#sidebar{

width: #30%;

}

}

/*然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應并且清除浮動，使得這些容器按全寬度顯示。*/

@media only screen and (max-width:700px ) {

#content {

width: auto;

float: none;

}

#sidebar{

width: auto;

float: none;

}

}

/*對于小于等于480像素（手機屏幕）的情況*/

@media only screen and (max-width:480px ) {

#head {

height: auto;

}

h1 {

font-size: 24;

}

#content {

width: auto;

float: none;

}

#sidebar{

display: none;

}

}

當然，在開發過程中，屏幕尺寸，根據實際的情況而定。媒介查詢的目的在于為指定的視圖寬度指定不同的CSS規則，來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

網站欄目：響應式設計轉html三部曲
分享地址：http://m.kartarina.com/news3/310753.html

成都網站建設公司_創新互聯，為您提供網站收錄、自適應網站、網站設計、標簽優化、網站改版、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯