Question

我最近把我的“alpha”舞台网站直播 - 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>

Answer 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元素为例;为了实现您的目标，您最好删除 relative定位，以及百分比 left值，以及只需将 text-align属性设置为 center 。

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

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

HTML5网站溢出-x

1 个答案: