首頁(yè) 猿問(wèn) 然而，不用框架，怎么做到自適應(yīng)呢？

然而，不用框架，怎么做到自適應(yīng)呢？

Html/CSS

菜鳥(niǎo)的蛻變之路 2016-07-09 11:05:21

查看完整描述

4 回答

已采納

blovetu

TA貢獻(xiàn)319條經(jīng)驗(yàn) 獲得超234個(gè)贊

首先，在<head>里加入一行viewport元標(biāo) 簽。<meta name=”viewport”content=”width=device-width, initial-scale=1″ />viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。
“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。
?? 其次，除了布局和文本，”自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。有條件的話，最好還是根據(jù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實(shí)現(xiàn)。

2 反對(duì) 回復(fù) 2016-07-09

剛毅87

TA貢獻(xiàn)345條經(jīng)驗(yàn) 獲得超309個(gè)贊

在設(shè)置寬度和高度時(shí),不要使用固定值,使用百分比,百分比值為父級(jí)寬度或高度的百分之幾.

1 反對(duì) 回復(fù) 2016-07-09

慕函數(shù)0883431

TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超1個(gè)贊

思路大概就是

meta 標(biāo)簽可以設(shè)置 minwidth maxwidth?

還有設(shè)置文檔中各個(gè)標(biāo)簽的寬度的時(shí)候，不要定死，用相對(duì)寬度 % ?百分制

反對(duì) 回復(fù) 2016-07-09

關(guān)注