導航:首頁 > 萬維百科 > 優秀的全屏網頁設計

優秀的全屏網頁設計

發布時間:2020-11-30 14:44:54

1、如何讓網頁自適應所有屏幕寬度

「自適應網頁設計」到底是怎麼做到的?其實並不難。

1.首先,在網頁代碼的頭部,加入一行viewport元標簽。
viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0
,即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。具體說,CSS代碼
不能指定像素寬度:width:xxx px;
只能指定百分比寬度:
width: xx%;
或者
width:auto;
3、相對大小的字體
字體也不能使用絕對大小(px),而只能使用相對大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。
三、流動布局(fluid grid)
「流動布局」的含義是,各個區塊的位置都是浮動的,不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。
另外,絕對定位(position: absolute)的使用,也要非常小心。
四、選擇載入CSS
「自適應網頁設計」的核心,就是CSS3引入的Media Query模塊。
它的意思就是,自動探測屏幕寬度,然後載入相應的CSS文件。

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

如果屏幕寬度在400像素到600像素之間,則載入smallScreen.css文件。
除了用html標簽載入CSS文件,還可以在現有CSS文件中載入。
五、CSS的@media規則
同一個CSS文件中,也可以根據不同的屏幕解析度,選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是,如果屏幕寬度小於400像素,則column塊取消浮動(float:none)、寬度自動調節(width:auto),sidebar塊不顯示(display:none)。
六、圖片的自適應(fluid image)
除了布局和文本,」自適應網頁設計」還必須實現圖片的自動縮放。
這只要一行CSS代碼:
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效,所以可以寫成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好寫成:
img { width: 100%; }
此外,windows平台縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});

2、網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。

3、網頁製作 怎麼能讓網頁在不同的解析度下全屏顯示

用百分比。
<table width="100%" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" bgcolor="#0066FF"> </td>
<td width="60%" valign="top"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#993300">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td> </td>
</tr>
</table></td>
<td width="20%" bgcolor="#0066FF"> </td>
</tr>
</table>

4、網頁設計中使用全屏照片有哪些注意點

 1、圖片質量.
眾所周知圖片在網頁設計中的重要作用,精美的圖片配之以絕妙的文案能給網站獲得漂亮的加分。而作為全屏背景的照片只有足夠精彩漂亮才會給用戶留下深刻印象,所以設計師在選擇照片時要注意圖片的質量問題。此外還要重視圖片展示的內容與網站主題的相關性,於此網站的主題內容才會在第一時間傳達給訪問用戶。
網頁設計中使用全屏照片有哪些注意點.
2、注意排版.
網頁設計中,使用全屏照片做為網站背景固然簡潔漂亮,干凈利落之餘設計師需更要考慮到整個網頁的布局,如何在大幅照片上進行排版,設置欄目,與照片背景顏色不產生沖突,又不影響用戶的閱讀體驗。
3、切圖.
設計師在使用全屏大圖時,需要注意背景不能太大,否則切出的背景太大會導致網站打開速度變得緩慢。此外需要注意的是,由於用戶習慣的差別,使用的瀏覽器也有所差別,設計師在切圖時需要綜合考慮各瀏覽器的兼容性問題,以及電腦的顯示屏大小問題,保證用戶在打開網站時,圖片能自動適應各種瀏覽器以及不同尺寸的顯示屏。
網站建設中,使用全屏照片作為網站背景不僅簡化了網站的復雜樣式,還可利用大幅照片以提升網站的感染力。
本文是 成都網站建設公司、成都網站設計製作公司、成都APP開發公司、 成都響應式網站建設、成都VR全景製作-桔子科技公司為您整理!

5、網頁設計中,如何讓網頁能在不同的解析度下都全屏顯示?

定義一個整體的DIV把寬度設置哦100%就可以了,如果裡面有幾列的話,首先確定哪幾個地方固定大小,哪先地方能縮放!根據情況定吧!

6、網頁設計問題:打開網頁全屏代碼,網頁全屏隱藏任務欄代碼是什麼?

是window.open嗎 百度下 有你需要的詳細資料

7、設計網頁時讓鏈接全屏顯示的代碼是什麼啊

一打開網頁不需要點擊,能夠直接全屏隱藏地址欄的那種如何實現 如我把靜態網頁刻到光碟中,打開立刻全屏 <script language="javascript"> if (this.name!='FullWnd') { window.open(location.href,'FullWnd','fullscreen,scrollbars=no'); this.parent.opener=null; this.parent.close(); } </script>

8、製作網頁如何能讓頁面全屏!

如果您想要讓指定網頁頁面全屏顯示的話,您可以在該頁面的html源代碼文件中,添加下面的代碼就能實現了:
<form>
<div align="center">
<input type="BUTTON" name="FullScreen" value="全屏顯示" onClick="window.open(document.location, ''big'', ''fullscreen=yes'')">
</div>
</form>

如果這個方法不滿意,你可以做一個flash。把網頁嵌到裡面。

9、全屏的網頁,設計psd時需要採用什麼尺寸的解析度

在網頁上圖上是可以縮放的,可以設置全屏。小到0,大到無限。

與優秀的全屏網頁設計相關的知識