javascript - 由于 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
  • 在默认缩放的 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、placeholder logo 应该消失...
• 请查看本文底部的图片

对于移动设备，我尝试了下面的方法只是为了测试，但都没有用...

@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">

希望对您有所帮助:-)