避免當用戶放大或縮小設計網頁時出現破損

如何避免當用戶放大或縮小網頁時破壞設計網頁，當我瀏覽其他網站時，當我縮小或放大時它們的設計不會中斷這是我的代碼避免當用戶放大或縮小設計網頁時出現破損

<!DOCTYPE html> 

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="all.css"> 
<title>Personal Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"></head> 
<body > 
<table border="0"width="100%" height="100"> 
<tr> 
<td align="left" width="25%"> <img src="compas.png" width="150" height="150" ></td> 
<td align="right" valign="top" width="40%" ><img src="scrol.png" width="120" height="120"><p id="text1">Home</p></td> 
<td align="right" valign="top"><img src="scrol.png" width="120" height="120"><p id="text2">About</p></td> 
<td align="right" valign="top"><img src="scrol.png" width="120" height="120"><p id="text3">Photos</p></td> 
<td align="right" valign="top"><img src="scrol.png" width="120" height="120"><p id="text4">Hobbies</p></td> 
<td align="right" valign="top"><img src="scrol.png" width="120" height="120"><p id="text5">Qbook</p></td> 
</tr> 
<tr> 
<td align="left" ><font face="old english text mt"><font size="6"><b>Personal Page</b></font></td> 
<td colspan="5"></td> 
</tr> 
</table> 
</body> 
</html>

這是CSS

body { 
background: url('background.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 
table { 
    table-layout: fixed; 
} 

#text1 
{ 
    position:absolute;  
    font-size:18px; 
    font-weight:bold; 
    left:790px; 
    top:40px; 
} 
#text2 
{ 
    position:absolute;  
    font-size:18px; 
    font-weight:bold; 
    left:914px; 
    top:40px; 
} 
#text3 
{ 
    position:absolute;  
    font-size:18px; 
    font-weight:bold; 
    left:1029px; 
    top:40px; 
} 
#text4 
{ 
    position:absolute;  
    font-size:18px; 
    font-weight:bold; 
    left:1141px; 
    top:40px; 
} 
#text5 
{ 
    position:absolute;  
    font-size:20px; 
    font-weight:bold; 
    left:1264px; 
    top:37px; 
}

什麼我要補充，我不得不改變什麼，請指導我

來源

2014-12-23 ven ray

您是否嘗試過使用Bootstrap？ http://getbootstrap.com/這個庫被設計來處理破損的頁面。您需要與TABLE度假，然後切換到DIV元素。 – agentpx

你正在尋找的東西叫做[Responsive Web Design]（http://en.wikipedia.org/wiki/Responsive_web_design）。幾個框架使得它很容易做到。 [Bootstrap]（http://getbootstrap.com/examples/theme/）就是其中之一。 – mason

TY爲稱道，所以我也讀到bootsrap，但我仍然不知道如何使用它，也許能跟大家可以給我一些網爲了解bootstrap.thankx –

有關問題的簡單的解決方案是使用像素 insted的百分比的提供寬度。您正在使用百分比樣式來提供寬度，以便在網頁設計中不推薦使用表格和td標籤。該頁面看起來被破壞，因爲在縮放時，任何系統的百分比寬度都是固定的，但文本和其他對齊取決於縮放時的像素樣式。 所以，請採取固定像素寬度，以完整的頁面，也比使用1380px的，因爲一般系統默認寬度他們細分爲所需的零件

（像素風格）作爲在上午上面的代碼示例屏幕有1380px（您可能那些不同）： -

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="all.css"> <title>Personal Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body > <table border="0" width="1380px" align="center" height="100"> <tr> <td align="left" width="write pixel"> <img src="compas.png" width="150" height="150" ></td> <td align="right" valign="top" width="40%" ><img src="scrol.png" width="120" height="120">Home</td> <td align="right" valign="top"><img src="scrol.png" width="120" height="120">About</td> <td align="right" valign="top"><img src="scrol.png" width="120" height="120">Photos</td> <td align="right" valign="top"><img src="scrol.png" width="120" height="120">Hobbies</td> <td align="right" valign="top"><img src="scrol.png" width="120" height="120">Qbook</td> </tr> <tr> <td align="left" >Personal Page</td> <td colspan="5"></td> </tr> </table> </body> </html>

* CSS文件是好的（無需任何更改），放大上述編碼的HTML頁面也不會看壞了。

來源

2014-12-23 04:15:39

ty下載它們，先生，是的，我已經將百分比改變爲像素了，但是當我縮小時，就像變小了一樣，但當我看到另一個時人們網絡，他們就像更小，但中間，這是posibble？ –

我們可以使用div標籤作爲整個頁面的父標籤，並在該div的css文件中使用align =「center」屬性。我認爲這將解決這個問題。 –

如果您使用的百分比車身寬度，請確保您分配上體標籤最大寬度，這將使正確的頁面放大和縮小功能。

來源

2017-09-15 18:25:27

避免當用戶放大或縮小設計網頁時出現破損

回答

相關問題