如何将整个网站及其元素扩展到任何浏览器大小？ [英] How to Scale your entire website and its Elements to any Browsers Size?
本文介绍了如何将整个网站及其元素扩展到任何浏览器大小？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好。我正在尝试扩展我必须适合任何浏览器大小或分辨率的网站。当我在计算机上开发网站时，分辨率为1920 * 1080。我在分辨率为1440 * 900的计算机上调试网站，其中一些功能稍微偏离了一些。所以我移动了一些东西以使其与1440 * 900分辨率相匹配。我知道有些用户不会有我的决议。我怎样才能让它发挥作用？我不能使用银灯，因为有些用户是MAC用户，我真的不想告诉所有用户启用或安装此功能。以下是我的某个页面的HTML代码。
Hello. I am trying to scale the website I have to fit any browsers size or resolution. When I developed the website on the computer that the resolution is 1920*1080. I debug the website on a computer that has a resolution of 1440*900 and some of the features are off a little. So I moved somethings around to get it to match the 1440*900 resolution. I know that some users will not have my resolution. How can I get this to work? I can't use silver light because some users are MAC users and I really don't want to tell all of my users to enable or install this feature. Here is the HTML code for one of my pages.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>SACSCOC Login</title>
<style type="text/css">
.style1
{
font-size: x-large;
}
.style2
{
width: 100%;
height: 130px;
}
.style3
{
width: 655px;
text-align: right;
}
.style4
{
width: 407px;
text-align: left;
}
.style5
{
text-align: left;
}
.style6
{
width: 188px;
text-align: center;
}
.style10
{
color: #0000FF;
}
.style11
{
width: 100%;
}
#form1
{
text-align: center;
}
.style12
{
font-weight: bold;
}
.style13
{
width: 188px;
text-align: left;
}
.style14
{
text-align: left;
width: 1750px;
}
</style>
</head>
<body background="Images/bkg-blu.jpg">
<form id="form1" runat="server">
<div class="style1">
<table class="style11">
<tr>
<td class="style14">
<img alt="" class="style4"
src="Images/f01cd29c-8bf7-45bd-8251-ce25ebd62ddf.gif" /></td>
<td class="style5">
</td>
</tr>
</table>
<br />
<span class="style10">
<br />
Login Page<br />
</span><br />
</div>
<table class="style2">
<tr>
<td class="style3">
UserName / Email Address</td>
<td class="style13">
<asp:TextBox ID="TextBoxEA" runat="server" MaxLength="50" Width="180px" >
</asp:TextBox>
</td>
<td class="style5">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBoxEA" ErrorMessage="You Must Enter A UserName"
ForeColor="Red" CssClass="style12"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style3">
Password</td>
<td class="style13">
<asp:TextBox ID="TextBoxPW" runat="server" TextMode="Password" Width="180px"></asp:TextBox>
</td>
<td class="style5">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBoxPW" ErrorMessage="You Must Enter The Password"
ForeColor="Red" CssClass="style12"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td class="style13">
</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style3">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/FINSubmitPage.aspx"
style="text-align: center; font-size: large;">New Password Creation</asp:HyperLink>
</td>
<td class="style6">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Login"
Width="106px" style="text-align: center" />
</td>
<td class="style5">
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/FINForgotPassword.aspx"
style="text-decoration: underline; color: #0000FF; font-weight: 700; font-size: large"
ForeColor="#FFCC00">Forgot Password</asp:HyperLink>
</td>
</tr>
</table>
<asp:Label ID="lblMessage" runat="server" Font-Bold="True"
Font-Names="Times New Roman" Font-Size="Medium" ForeColor="Red"></asp:Label>
</form>
</body>
</html>推荐答案
You need to embraceliquid,fluidandelasticdesign. Please see my past answers:
Webpage screen resolution (Cross Browser\Cross Platform) problem[^],
To Get Screen resolution[^].
One note on your CSS: avoid using pixel sizes; you can, for example, use relativeemunits, which express lengths in the units of current font size.
Look at the HTML of this answer. Make you browser window resizeable and resize it, even to some extremely small sizes. Isn’t my text still readable? If you think that this is due to some sophisticated CodeProject style, do the following: copy HTML source of only my answer, save it in a file and view separately in your browser. Isn’t it well rendered in a window of any size? It is already fluid.
So, the case of good design is: simplicity.
—SA
You need to embraceliquid,fluidandelasticdesign. Please see my past answers:
Webpage screen resolution (Cross Browser\Cross Platform) problem[^],
To Get Screen resolution[^].
One note on your CSS: avoid using pixel sizes; you can, for example, use relativeemunits, which express lengths in the units of current font size.
Look at the HTML of this answer. Make you browser window resizeable and resize it, even to some extremely small sizes. Isn't my text still readable? If you think that this is due to some sophisticated CodeProject style, do the following: copy HTML source of only my answer, save it in a file and view separately in your browser. Isn't it well rendered in a window of any size? It is already fluid.
So, the case of good design is: simplicity.
—SA
这篇关于如何将整个网站及其元素扩展到任何浏览器大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
