文章/答案/技术大牛

发布

社区首页 >问答首页 >HMTL5网站溢出-x

问HMTL5网站溢出-x
EN

Stack Overflow用户

提问于 2013-06-10 20:21:18

回答 1查看 182关注 0票数 0

我最近把我的“阿尔法”stage网站放在live - http://www.elegantdesigns.comule.com/上

我使用媒体查询将其完全编码为具有移动支持。当在浏览器中查看并使宽度变小时，它可以完美地工作。但是，当我在宽度为720像素的移动设备(三星Galaxy Note2)上使用它时，所有仅由页面背景填充的内容的右侧都会有一个空间。

我使用了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>

css

html

mobile

media-queries

fluid-layout

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-10 20:53:04

罪魁祸首似乎在于您在页脚中设置元素的样式。在这种情况下，删除相对位置和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定位以及percentage left值，并简单地将text-align属性设置为center。

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

只有当您希望在文档流之外对元素的定位施加更大的控制时，才应使用相对定位。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17023747

复制

相似问题

问HMTL5网站溢出-x
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HMTL5网站溢出-xEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HMTL5网站溢出-x
EN