<em id="dx444"><object id="dx444"><input id="dx444"></input></object></em>
新聞觀點

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

標簽: 網頁設計 ? 響應式布局 ? ? | 作者:轉載網絡| VISITORS: | 來源:錦明網絡營銷
06
Oct
2016
    隨著移動設備的逐漸普及和Web技術的發展,跨端的Web開發需求將會越來越大。如何在多種設備上進行跨端的界面適配呢?我們可以利用CSS3的Media Query來實現。本文主要介紹了移動開發和CSS3結合,來進行多種分辨率適配的例子。
        文中提到的響應式網頁設計(Responsive web design)是一種現代網頁設計方法,基于CSS3的媒介查詢(Media Query)特性使得網頁適應不同設備,即根據設備的分辨率和縮放自動重新布局。
       

        響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計,可以看看我最近發表的響應式站點列表(譯者注:可以好好看看示例中的網站在不同分辨率下的展現方式)。對新手來說,響應式設計可能有一點復雜,但是事實上比你想象的簡單。為了幫助你迅速的了解響應式設計,我起草了一篇快速教程。你可以在3個步驟中學習到響應式設計和媒介查詢(Media Queries)的基本原理(假定你了解基本的CSS知識)。
        第一步:Meta標簽(查看演示)
大多數移動瀏覽器將HTML頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器,使用設備的寬度作為視圖寬度并禁止初始的縮放。在<head>標簽里加入這個meta標簽。
[html] view plain copy
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。
[html] view plain copy
  1. <!--[if lt IE 9]>  
  2.     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
  3. <![endif]-->  
        第二步:HTML結構
        在這個例子里,我有一個包括頭部、內容、側邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素,內容容器是600像素而側邊欄是300像素。
 
        第三步:媒介查詢-Media Queries
        CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
        當視圖寬度為小于等于980像素時,如下規則將會生效?;旧?,我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。
 
        然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應并且清除浮動,使得這些容器按全寬度顯示。
 
        對于小于等于480像素(手機屏幕)的情況,將#header元素的高度設置為自適應,將h1的字體大小修改為24像素并隱藏側邊欄。
 
        你可以根據你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個媒介查詢。媒介查詢的目的在于為指定的視圖寬度指定不同的CSS規則,來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。

轉載聲明:本文由滕州網站優化-錦明SEO網絡整理發布
轉載請注明來源:http://www.k30302.cn/new/jianzhan/104.html
相關新聞
最新新聞
最新案例
錦明網絡—幫助企業塑造網絡品牌影響力,您身邊的網絡營銷專家!
分享按鈕 2018年一期东方心经 岑溪市| 刚察县| 班玛县| 社旗县| 潢川县| 金昌市| 崇礼县| 临夏市| 曲水县| 海门市| 克山县| 昌黎县| 龙川县| 正镶白旗| 镇原县| 开阳县| 无棣县| 五常市| 顺义区| 星子县| 桂平市| 邵武市| 榆林市| 教育| 余庆县| 寿宁县| 临汾市| 湟中县| 云梦县| 本溪市| 凭祥市| 苏尼特左旗| 东兰县| 汨罗市| 昌吉市| 前郭尔| 大庆市| 和平县| 朝阳市| 东丽区| 赤水市| http://game.0zs343.top http://v.lsj67h.club http://qq.0ag7u8.top http://www.gei67.cn http://www.sinah9w7.pw http://game.784d4g.top