html 屏幕大小問題

這是你做頁面的時候沒規劃好。一般設計網頁之前就要考慮顯示器的尺寸。

顯示器一般是以下幾個尺寸:

1366x768/1440x900/1600x900/1920x1080

我們不需要考慮顯示器高度,很多網站將頁面設計成最大1200寬。

通常一個頁面設計好之後我們要把這個頁面的模塊根據寬度分成兩個類:

  1. 小於1200px寬的;

  2. 大於1200px寬的;

對於小於1200寬度的模塊,我們只需將其根據設計上的尺寸寫出來即可。

這部分的內容在css中的特徵是數值都以像素顯示,如600px、150px之類的。

接下來處理讓很多程序員頭痛的部分:大於1200寬的部分。

這就需要知道自適應的概念了。

所謂自適應,就是不論在什麼尺寸的顯示器上顯示,這類模塊都會根據一定的比例在顯示器中顯示,如果不是刻意為之,是不會有超出顯示器屏幕寬度的部分存在的。

這部分模塊的特點在css中經常以%體現,比如:width:50%;、left:20%。

此外,對於width:100%之類的樣式,瀏覽器依然會出現橫向滾動條。

但是此時的滾動條幾乎是毫無作用的,偏差不過五六個像素而已。

若為了追求完美,完全可以在開頭處加入以下的js代碼

document.body.overflowX="hidden";

若你按照以上的方式去做頁面,則可避免顯示器解析度的問題。

⑵ 在html中將插入背景圖片,如何讓背景圖片跟屏幕一樣大

在html中將插入背景圖片,讓背景圖片跟屏幕一樣大的步驟如下:【新建文件夾】-【新建一個html空白文檔】-【<body></body>】-【瀏覽】-【插入】-【預覽】。

  1. 點擊【新建文件夾】。如圖所示:

⑶ 怎麼讓html圖像和屏幕一樣大

使html中div內的圖片隨屏幕大小調節的操作方法為,將div與img的寬度都設置為100%,代碼如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

<htmlxmlns="

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>圖片大小自適應</title>
<styletype="text/css">
div,img{width:100%;}
</style>
</head>
<body>
<div>
<imgsrc="20150930010349.jpg"/>
</div>
</body>
</html>



詳細代碼見附件。


效果圖如下:特別說明:
要圖片跟隨屏幕大小顯示,可以將圖片與div的寬度調整為100%,並且body不設置寬度(或者也設置為100%),在使用不同屏幕瀏覽網頁時,圖片將自動鋪滿屏幕。


⑷ html布局:一個小網頁在大屏幕顯示,想要居中效果。那麼,<body>及背景圖片怎麼設置才能達到居

body{ background: url("images/aardvark.gif"); background-repeat: repeat; margin:0px auto ;text-align:center;}

⑸ 做好的html,怎麼讓它轉成html5自適應屏幕大小

首先你要在html頁面頭部加上下面的代碼,其次你要把頁面中的寬度修改為百分比,不能不用固定尺寸,一些小的模塊可以用固定尺寸。再就是css中要應用到媒體查詢,也就是@media,不懂可以網路。

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

⑹ html頁面怎麼設置固定屏幕大小。

第一步:
將以下代碼加入頁面:
<script language=javascript>
function hero()
{
var herowidth=400;//改為你要的網頁寬度
var heroheight=300;//改為你要的網頁高度
window.resizeTo(herowidth,heroheight);
}
hero();
</script>

第二步:
在<body>中加入:
<body onresize=hero();>

⑺ html里,如何讓背景圖片根據屏幕大小鋪滿屏幕不重復

html里,讓背景圖片根據屏幕大小鋪滿屏幕不重復,具體方法如下:

1、首先我們用Dreamweaver軟體做一個html文檔,當然用其他編輯器也可以。

5、需要注意的是這是css3增加的新屬性,舊版本的瀏覽器可能不支持。所以有時需要更新瀏覽器。

⑻ html頁面 自適應pc端 屏幕大小 怎麼設置

使用媒體查詢,參考bootstrap裡面的設置,或者直接使用bootstrap框架吧,根據瀏覽器的寬度自動設置寬度的

媒體查詢代碼實例

@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}

.gridmain
{
width:100%;
}

.gridright {
width:100%;
}
}

⑼ 如何設置html自適應屏幕大小

給每個div設置的是百分比寬就可以了。

還有什麼不懂可以追問。