現在的位置: 首頁 > web前端 > 正文

怎樣設計響應式網頁

2020年06月15日 web前端 ⁄ 共 1158字 ⁄ 字號 評論關閉

  現在,響應式Web設計無疑是非常流行的。如果你對響應式設計還不熟悉,可以看看我之前發表過的關于這方面的responsive sites。對于新人,responsive design可能聽起來有點復雜,但實際上,它比你想的要簡單的多。下面學步園小編來講解下怎樣設計響應式網頁?

  怎樣設計響應式網頁

  第一步:Meta標簽(看demo)

  大部分移動瀏覽器會把HTML頁面縮放成較寬的viewport的寬度,這樣內容就可以屏幕上正確的展示了。你可以使用viewport這個meta標簽 來重置這個行為。下面的viewport標簽告訴瀏覽器使用設備寬度(device-width)做為viewport的寬度,并且禁用初始的縮放比例。 在head>中加入這個meta標簽。

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

  IE 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]—>

  第二步:HTML結構

  在這個例子中,我擁有一個由頭部,內容容器,側邊欄,以及一個底部構成的基本的頁面布局。頭部擁有一個固定的180px高度,內容容器600px寬,然后側邊欄是300px寬。

  怎樣設計響應式網頁

  第三步:媒體查詢

  CSS3 media query是進行響應式設計的戲法,它跟寫if條件一樣,來告訴瀏覽器對于特定的viewport寬度如何渲染頁面。

  下面的規則是針對視口寬度小于等于980px設計的。基本上,我把所有容器的寬度從像素值改成了百分比值,這樣容器就會變得具有流動性(fluid)。

  然后對于寬度小于或等于700px的viewport,指定#content和#sidebar為自動寬度,并且移除浮動,所以他們可以以全寬度進行展示。

  對于寬度小于等于480px(移動設備屏幕)的,重置#header的高度為auto,修改h1的字體大小為24px,并且隱藏#sidebar。

  你可以想寫多少媒體查詢就寫多少。我在demo中只展示了三個媒體查詢。媒體查詢的目的是對于指定的viewport寬度可以通過應用不同的CSS規則來獲得不同的布局。媒體查詢可以在同一個樣式表中或者在一個單獨的文件中。

  以上就是關于“怎樣設計響應式網頁”的內容,希望對大家有用。更多資訊請關注學步園。學步園,您學習IT技術的優質平臺!

抱歉!評論已關閉.

奔驰宝马破解版下载 吉林快3走势图表今天 股米网 澳大利亚快乐8 一分快三开奖官网查询 天津快乐十分走势图彩经网 内蒙古彩票快3下载 炒股行情走势 广东快乐10分人工计划 舟山体彩飞鱼开奖查询 海南体彩论坛4十1 福建快3一定牛走势图 甘肃快三豹子最大遗漏 知富平台敢入金吗 河北快3专家预测推荐 宁夏十一选五任五遗漏 杠杆配资