0

我最近上线了我的“阿尔法”舞台网站 - http://www.elegantdesigns.comule.com/

我使用媒体查询在移动支持的情况下对其进行了完全编码。当在浏览器中查看并缩小宽度时，它可以完美地工作。但是，当我在宽度为 720 像素的移动设备（三星 Galaxy Note 2）上使用它时，所有内容的右侧都有一个空间，仅由页面背景填充。

我使用了 100% 的宽度，我还为多个元素设置了 overflow-x 隐藏。

使用上面的链接自行查看。

这就是网站在我的设备上的样子。

http://i.stack.imgur.com/27wJc.png

有人有想法么？

以下是控制网站主要移动部分的所有样式表的链接。- http://elegantdesigns.comule.com/mobilestyle.css - http://elegantdesigns.comule.com/tabstyle.css

这是控制标题的html：

<html>
<head>
    <title>Flat Designs</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" media="only screen and (min-width: 811px)"href="mainstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 810px) and (min-width: 721px)" href="tabstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 720px) and (min-width: 521px)" href="mobilestyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 520px) and (min-width: 431px)" href="tinystyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 430px) and (min-width: 1px)" href="smalleststyle.css">
    <link rel="shortcut icon" href="http://www.iconj.com/ico/9/e/9ecev208p2.ico" type="image/x-icon" />

    <link href='http://fonts.googleapis.com/css?family=Ropa+Sans:400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

</head>
4

1 回答 1

1

罪魁祸首似乎在于您如何为页脚中的元素设置样式。在这种情况下，删除相对定位以及 left 属性可以解决问题。

about {
  position: relative; /* You don't need this */
  left: 30%; /* Removing this property fixes the overflow/width issue */
  color: #666;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
}

您正在对页脚中的所有元素使用相对定位，但没有明显的目的。以#about元素为例；为了实现您要实现的目标，您最好删除relativeposition以及 percent leftvalue，并将text-align属性设置为center.

about {
  color: #666;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
  text-align: center;
}

如果您希望在文档流之外对元素的定位施加更大的控制，则应该只使用相对定位。

于 2013-06-10T12:53:03.870 回答