免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

三步完成簡單響應式制作

2024-02-29    分類: 網站建設

1.想要網站兼容手機、平板電腦、pc,就得為不同的設備定制不同的版本。
2.想要網站的某些頁面在寬屏顯示器下一行顯示更多的內容,又得為寬屏定制一個版本。
3.很多人并不是在全屏的情況下瀏覽我們的頁面,如果讓頁面隨著瀏覽器寬度改變而相應的調整會不會比較好?
為了解決上述的問題,常用的解決方法——web響應式。
響應式的概念,網上到處都有,就不在累贅了,下面我們談談他的開發(fā)流程:

第一步: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-媒介查詢是響應式設計的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。下面的代碼分別是針對980px、700px、480px的情況生成的響應
/*當視圖寬度為小于等于980像素時,如下規(guī)則將會生效。*/
@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;
}
}

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

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯(lián)成都公司!

當前題目:三步完成簡單響應式制作
分享URL:http://m.newbst.com/news21/319521.html

成都網站建設公司_創(chuàng)新互聯(lián),為您提供微信小程序網站導航企業(yè)建站移動網站建設用戶體驗域名注冊

廣告

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

搜索引擎優(yōu)化