3個步驟實現網頁響應式設計

時間 : 2018-06-26
點擊次數 : 1010
        寫在前面的話:隨著移動設備的逐漸普及和Web技術的發展,跨端的Web開發需求將會越來越大。如何在多種設備上進行跨端的界面適配呢?我們可以利用CSS3的Media Query來實現。本文主要介紹了移動開發和CSS3結合,來進行多種分辨率適配的例子。
        文中提到的響應式網頁設計(Responsive web design)是一種現代網頁設計方法,基于CSS3的媒介查詢(Media Query)特性使得網頁適應不同設備,即根據設備的分辨率和縮放自動重新布局。
       
        -----------
        響應式網頁設計現在無疑是一件大事情。對新手來說,響應式設計可能有一點復雜,但是事實上比你想象的簡單你可以在3個步驟中學習到響應式設計和媒介查詢(Media Queries)的基本原理(假定你了解基本的CSS知識)。
        第一步:Meta標簽(查看演示

大多數移動瀏覽器將HTML頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器,使用設備的寬度作為視圖寬度并禁止初始的縮放。在<head>標簽里加入這個meta標簽。


IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。

第二步:HTML結構
        在這個例子里,我有一個包括頭部、內容、側邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素,內容容器是600像素而側邊欄是300像素。

 
        第三步:媒介查詢-Media Queries
        CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
        當視圖寬度為小于等于980像素時,如下規則將會生效?;旧?,我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。
 
        然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應并且清除浮動,使得這些容器按全寬度顯示。
 
        對于小于等于480像素(手機屏幕)的情況,將#header元素的高度設置為自適應,將h1的字體大小修改為24像素并隱藏側邊欄。
 
        你可以根據你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個媒介查詢。媒介查詢的目的在于為指定的視圖寬度指定不同的CSS規則,來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。

上一篇:響應式網頁開發時所需注意的事項

上一篇:網站優化最新技術

友情鏈接:云聯泰達OA開發
煙臺網云網絡科技有限公司 魯ICP備14027327號-3

回到頂部
天津快乐10分开奖软件 上海十一选五一天几期 黑龙江快乐十分开奖结果查询 网络彩票怎么玩才会赢钱 福建22选5开奖数据 天天红包赛什么时候提交最好 上证指数是什么意思 贵州快三07034期预测 短线买什么股票 三分pk拾规律 内蒙古快3开将结果