由于 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 - 左/右滚动图像按钮
  • 目前我的左右滚动图像按钮是在 html 中使用 onmouseover 和 onmouseout 完成的，我希望能够将它们转换为基于 css 的“按钮”

---

• 问题 2 - 动态分辨率
  • 页眉和页脚在不同分辨率下不是动态的，例如，我在 1680x1050 显示器上设计的页面看起来像：Desktop 1680x1050 但是缩小窗口看起来像：Desktop Small Window
  • 在默认缩放的 Nexus 4 手机上，它看起来像：Mobile Original Zoom
  • 在 Nexus 4 手机上缩小到尽可能远的样子：Mobile Max Distance
  • 在 Nexus 4 上缩小并滚动到底部（这样浏览器的 URL 栏就会消失），它看起来像：Zoomed out without URL bar （实际网页的页脚消失了）
  • 在 Nexus 4 上缩小并从底部滚动（以便浏览器 URL 栏可见），它看起来像：Zoomed out with URL bar （页脚返回） .
• 占位符图像和箭头应位于页脚和页眉的中心，并应根据屏幕分辨率缩小。
• 移动设备默认缩放（如果可能）需要减少，以便他们可以看到更多，并且如果它接近Mobile Original Zoom，然后缩小（如果可能）Up to Top，Down to Key，占位符徽标应该消失...
• 请查看本帖底部的图片

对于移动设备，我尝试了以下仅用于测试的方法，但都没有奏效...

@media (max-width: 640px) {
    #header > a img {
        display: none;
    }
}

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

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

在 1680x1050 的屏幕上，它大致看起来应该如何记录“Semi”的位置，并与上方的 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 来完成，只需删除 <a> 标签内的 <img> 标签，如下所示：

<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%;
}

第二个问题，我想如果你从#header .headimage 和#footer .footimage 中删除position:absolute; 就可以了。

如果您想将 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

好的，我已尝试过滤掉此解决方案的所有不相关代码。

查看解决方案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 元素移动到与.footimage.

---

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

.element //Native and mouseout
{} 

.element:hover //onmouseover
{}

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

.element
{color:red;}

.element
{color:black;}

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

Answer 4

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

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

如果您想从中心偏移，请尝试 position:relative 和 top、left、right 等，它会相对于它的中心位置移动。

显示元素：内联；或显示：内联块；将根据父母的 text-align 属性对齐，在本例中为 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 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/