廣西桂林SEO提供SEO培訓、SEO優化、SEO顧問及企業SEO優化培訓服務,專業提供SEO優化教程學習交流與各種免費SEO視頻教程下載

HTML5—-響應式(自適應)網頁設計

WEB設計 guilinseo 882℃ 0評論

第一步:在網頁代碼的頭部,加入一行viewport元標簽

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

1443535419135

viewport是網頁默認的寬度和高度,
上面這行代碼的意思是:網頁寬度默認等于屏幕寬度(width=device-width),
原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。

所有主流瀏覽器都支持這個設置,包括IE9。對于那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js

1
2
3
<!--[if lt IE 9]>?
<![endif]-->

第二步:(注意)不使用絕對寬度,字體大小

1
width:auto; / width:XX%;

第三步:(注意)字體大小

字體大小是頁面默認大小的100%,即16像素
字體不要使用絕對大小”PX”,要使用相對大小“EM”

1
2
html{font-size:62.5%;}?
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

第四步:流動布局

“流動布局”的含義是,各個區塊的位置都是浮動的,不是固定不變的

1
2
.left{ width:30%; float:left}?
.right{ width:75%; float:right;}

其好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現

第五步:選擇加載CSS

“自適應網頁設計”的核心,就是CSS3引入的Media Query模塊。自動探測屏幕寬度,然后加載相應的CSS文件

1
2
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)"
href="style/css/css600.css" />

上面的代碼意思是,如果屏幕寬度小于600像素(max-device-width: 600px),就加載css600.css文件。

如果屏幕寬度在600像素到980像素之間,則加載css600-980.css文件

1
2
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)"
href="css600-980.css" />

另有(不建議使用):除了用html標簽加載CSS文件,還可以在現有CSS文件中加載

1
@import url("css600.css") screen and (max-device-width: 600px);

第六步:CSS的@media規則

1
@media screen and (max-device-width: 400px) {? .left{ float:none;} }

當屏幕小于400時,left取消了浮動

第七步:圖片的自適應

“自適應網頁設計”還必須實現圖片的自動縮放。

1
img, object {max-width: 100%;}

老版本的IE不支持max-width,所以只好寫成:

1
img {width: 100%;}

windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令

1
img { width:100%; -ms-interpolation-mode: bicubic;}

或使用js–imgSizer.js

1
2
3
4
addLoadEvent(function() {?
    var imgs = document.getElementById("content").getElementsByTagName("img");?
    imgSizer.collate(imgs);?
  });

注:如有條件的話,最好還是根據不同大小的屏幕,加載不同分辨率的圖片

簡易式操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style type="text/css">?
img{ max-width:100%;}?
video{ max-width:100%; height:auto;}?
header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;}?
header select{display:none;}?
@media (max-width:960px){?
????header ul{ display:none;}?
????header select{ display:inline-block;}?
}?
</style>?
???
<body>?
<header>?
????<ul>?
????????<li><a href="#" class="active">Home</a></li>?
????????<li><a href="#">AAA</a></li>?
????????<li><a href="#">BBB</a></li>?
????????<li><a href="#">CCC</a></li>?
????????<li><a href="#">DDD</a></li>?
????</ul>?
????<select>?
????????<option class="selected"><a href="#">Home</a></option>?
????????<option value="/AAA">AAA</option>?
????????<option value="/BBB">BBB</option>?
????????<option value="/CCC">CCC</option>?
????????<option value="/DDD">DDD</option>?
????</select>?
</header>?
???
</body>

轉載請注明:廣西桂林SEO » HTML5—-響應式(自適應)網頁設計

喜歡 (45)or分享 (0)
發表我的評論
取消評論
表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(1)個小伙伴在吐槽
  1. HTML5—-響應式(自適應)網頁設計
福彩3d预测