由于css不正确，网页在不同分辨率上显示不正确

Question

我的网页存在一些问题，主要是在移动设备上，但它也会影响桌面设备，我愿意给予奖励（当stackoverflow允许我的时候）给任何人可以提供帮助有这些问题

HTML：http://pastebin.com/raw.php?i=bbFsMcwT

CSS：http://pastebin.com/raw.php?i=SGMwt3cs

JSFiddle：http://jsfiddle.net/D8SJD/

• 问题1 - 左/右滚动图像按钮
  • 目前我的左右滚动图片按钮是使用onmouseover和onmouseout在html中完成的。我希望能够将它们转换为基于CSS的“按钮”

---

• 问题2 - 动态解决方案
  • 页眉和页脚不是动态的，具有不同的分辨率，例如，我创建了在1680x1050显示器上设计的页面，如下所示：Desktop 1680x1050但是使窗口变小，看起来像：Desktop Small Window < / LI>
  • 在默认缩放的Nexus 4手机上，它看起来像：Mobile Original Zoom
  • 在Nexus 4手机上尽量缩小，看起来像：Mobile Max Distance
  • 在Nexus 4上缩小并滚动到底部（以便浏览器网址栏消失），它看起来像：Zoomed out without URL bar （实际网页的页脚消失）
  • 在Nexus 4上缩小并从底部滚动（以便浏览器网址栏可见），它看起来像：Zoomed out with URL bar （页脚返回）
• 占位符图片和箭头应位于页脚和页眉的中心，并应根据屏幕分辨率缩小。
• 移动设备默认缩放（如果可能）需要降低，以便在接近Mobile Original Zoom然后Up to Top，{{1}时，可以看到更多并且变小（如果可能） }， 占位符徽标 应该消失......
• 请参阅此帖子底部的图片

对于移动设备，我尝试了下面的内容，仅用于测试，但没有一个工作......

Down to Key

编辑14/11/2013 @ 01：58GMT

在1920x1080的屏幕上，虽然文本和占位符图像之间存在很大差距，但它看起来还不错，如下所示：

在1680x1050的屏幕上，它大致看起来应该注意“半”的位置，并与上面的1920x1080图像进行比较。

在600x600屏幕上，它显示如下，正如您所看到的，占位符和左箭头之间有一个很大的间隙，但是在右箭头上没有间隙，实际上它溢出了，因为它也是文本太远了。

Answer 1

类型

@media screen and (max-width:640px) {
  /* Your specific styles go here */
}

并且不要忘记添加

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

希望有所帮助:-)

Answer 2

我看到您的链接周围的边框，从您的链接中删除：

a{
    border:none ;
}

对于第一个问题，您可以使用CSS执行此操作，只需删除<img>标记内的<a>标记，如下所示：

<div class="footleft">
   <a class="def" href="javascript: void(0);">

   </a>
</div>

创建像这样的图像按钮：

然后将背景设置为<a>标签，如下所示：

#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}

#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}

#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}

第二个问题，我想如果您从position:absolute;和#header .headimage删除#footer .footimage，那就没关系。

如果您想集中headmid和footmid以及footmidtwo，您有两个选择，

首先：为它们设置固定宽度并使用这样的CSS：

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}

第二：如果你需要动态宽度，你可以使用这个CSS和JQuery：

CSS：

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}

JQuery的：

var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();

$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));

jsFiddle is here

Answer 3

http://jsfiddle.net/D8SJD/4/

您可以利用文本对齐中心，而不是使用绝对定位，图像和文本将自动居中。

如果你想偏离中心，尝试位置：相对，上，左，右等，它将相对于它的中心位置移动。

显示的元素：内联;或显示：inline-block;将根据父文本对齐属性进行对齐，在本例中为text-align：center。

#footer .footimage {
    display:inline;
    position:relative;
    top:-10px;
}

#footer .footmid {
    top: 50%;
    width:100%;
    position: absolute;
    font-size: 15px;
}

#footer .footmidtwo {
    top: 70%;
    width:100%;
    position: absolute;
    font-size: 15px;
}

Answer 4

好的，我已经尝试过滤掉这个解决方案的所有无关代码。

请参阅解决方案here。

大多数情况下，最好使用相对定位来使元素完全适合另一个元素。在你的情况下，有三个不同的字符串适合300x80窗口，它有点拥挤。我试图将事情置于合理的位置来展示。

通过将容器放在具有相对位置的footimage div中，然后可以将footimage div中的每个元素与footimage div完全相关，而不是放在整个页面上

例如，你有什么：

#footer .footmid
{

    position: absolute;
    top: 50%;
    left: 50%;
}

将类footmid的div放在页面顶部页面高度的50％位置和页面左侧页面宽度的50％处：

如果访问您网页的每个用户具有完全相同的分辨率，则此功能将起作用，但是如果不这样做则会导致问题。显然，这不是一个完美的世界，所以不同的分辨率将访问你的页面。

你可以做的是使用相对定位！

基本上我告诉CSS，不要从窗口的顶部和左边移动50％，而是从相应位置的最近父元素的顶部和左边移动50％：

您可以修改my fiddle的bottom，left和right属性，以移动相对元素footmid中的.footimageContainer元素与.footimage具有相同的大小和位置。

---

至于你的箭，我不太确定你想要完成什么;你的问题很模糊，所以当你将它们鼠标悬停时，我只是让它们略微淡出。可以使用CSS伪造元素处理任何鼠标悬停/移出事件。

.element //Native and mouseout
{} 

.element:hover //onmouseover
{}

请记住，如果使用伪元素，则必须指定将在native和hover规则中更改的属性。

.element
{color:red;}

.element
{color:black;}

如果您对箭头有任何其他问题，请告诉我，我会修改我的答案。

Answer 5

根据问题2，我可能错了，但是在通过网站结构定位图像时 即。

headImg a img{...}

风格不起作用。但是如果你为图像添加类，那么样式就会起作用;情况可能是有一些未公开的div或元素弄乱了架构。

<div class="headimage">
    <a href="url" target="_blank"><img class="placeholder" src="http://placehold.it/300x80"/></a>
</div>

@media screen and (max-width: 640px) {
    .placeholder {
        display: none;
    }
}

JsFiddle在这里 - http://jsfiddle.net/Q5bEb/