Question

我对HTML有疑问。由于我对此很陌生，我不确定我的编码方式是否有效。对我而言，主要问题是当页面在浏览器上放大时页面的外观如何，所有内容都会聚集在一起并相互重叠。我应该如何用纯HTML和CSS来解决这个问题？

以下是一些图片链接：

在100％缩放时，页面如下所示：http://i.imgur.com/yW7OWlN.jpg

在150％缩放时，页面如下所示：http://i.imgur.com/kmv9e3k.jpg

以下是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
   <title>Sample Site</title>
   <link rel="stylesheet" type="text/css" href="Site.css">
</head>
<body>
   <div class="logo">
      <img src="Website Logo.png" alt="Website Logo" height="180px" width="300px">
   </div>

   <div class="slogan">
      <font color="#bfbfbf"><p>Good music, good friends, the rich aroma of 
      <font color="red">Strawberry</font>, <font color="blue">Blueberry</font>, 
      <font color="orange">Peach</font>, <font color="purple">Grape</font>, and cool 
      <font color="green">Menthol</font>.</p>
      <p>Let our flavours enthrall you, as you rock the night away.</p></font>
   </div>
   <div class="sloganFooter">
         <font class="part1" color="#bfbfbf">Come and </font> 
         <font class="part2" color="aqua">DISCOVER EXCITEMENT!</font></h3>  
   </div>

   <div class="navigation">
      <ul>
         <li><p>HOME</p></li>
         <li><p>PRODUCTS</p></li>
         <li><p>VENDORS</p></li>
         <li><p>FAQ</p></li>
         <li><p>CONTACT</p></li>
      </ul>
   </div>

   <div class="mainPageImage">
      <img src="Main Page.png" alt="Main Page Image">
   </div>   

   <div class="socialMediaLinks">
      <img src="facebook.png" alt="Facebook" height="40px" width="40px" 
      style="margin-right:15px;">
      <img src="twitter.png" alt="Twitter" height="40px" width="40px" style="margin-right:15px;">
      <img src="instagram.png" alt="Instagram" height="40px" width="40px" 
      style="margin-right:15px;">
   </div>
   <div class="copyright">
      <font color="#bfbfbf">&copy;2014 E-Clear Limited. All rights reserved.</font>
   </div>
</body>
</html>

以下是我的CSS代码：

body
{
   background-image: url("Website BG.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center; 
   background-color: black;
}

ul
{
   list-style-type: none;
}

.logo
{   
   margin-left: 17.500em;
   margin-top: 2.500em;
}

.slogan
{
   position: absolute;
   left: 43%;
   top: 5%;
   font-size: 1.250em;
   font-family: Calibri;   
   line-height: 50%;   
}

.sloganFooter
{
   position: absolute;
   left: 65%;
   top: 15%;
}

.part1
{
   font-size: 1.250em;
}

.part2
{
   font-size: 1.500em;
   font-weight: bold;
}

.navigation
{
   position: absolute;
   color: #bfbfbf;
   left: 12%;
   top: 25%;
   font-size: 2.188em;
}

.mainPageImage
{
   position: absolute;
   left: 26%;
   top: 25%;
}

.socialMediaLinks
{
   position: absolute;
   top: 90%;
   left: 50%;
}

.copyright
{
   position: absolute;
   top: 95%;
   left: 46.5%;
}

Answer 1

将此行放入HTML <head>：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果您不希望用户缩放，可以将user-scalable属性设置为“no”：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

使用这些标记可以随意扩展您的网站。

此外，如果您的网站在设计时考虑到good responsive design，那么缩放和缩放将不会成为一个问题。

希望这有帮助！

Answer 2

您应该使用＆＃34; mainPageImage＆＃34;的相对位置。 DIV。 Chrome也知道缩放问题。 Meta视口我认为没有任何改变。

HTML缩放问题

2 个答案:

希望这有帮助！