jquery - 使用什么 CSS/jQuery 来避免网站因屏幕分辨率较低而被切断？

Question

我希望网站周围有一个灰色边框，以便屏幕横向的用户能够处理它，但内容是必须出现的最重要的内容 - 特别是对于那些没有足够宽的屏幕的人(边框不应该是为他们展示或被切断或诸如此类)。我当前的 CSS 总是在左侧和右侧使用 200px。我尝试将其切换为百分比，但它仍然只使用该百分比。如果我切换到在正文中指定宽度而不是内容，也无法修复它。

这是我现有网站的代码:http://jsfiddle.net/syQgH/1/ ，相关CSS如下所示:

body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
    color:#564b47;
    margin: 20px 200px 20px 200px;
}
#content {
    width: 100%;
    padding: 0px;
    text-align: left;
    background-color: #fff;
    overflow: auto;
}

这是整页结果:http://jsfiddle.net/syQgH/1/embedded/result/

屏幕宽度较小的用户会看到它在 x 轴上被切断，并在 y 轴上看到滚动条。我知道如何添加overflow-y以在x轴上添加滚动条，但理想情况下，我可以在网站周围拥有140px的动态灰色空间，其中屏幕景观允许，但在不允许的地方则很少或没有。我认为我应该使用百分比而不是固定像素值，但这似乎具有相同的效果，因为我不希望它对没有足够屏幕景观的用户生效。

我对 JavaScript/jQuery 解决方案持开放态度。

Answer 1

您可以考虑使用 CSS media queries以使您的网站响应用户的视口(viewport)大小。

例如，在你的 CSS 中你可以有这样的东西:

/* Place your base CSS styles */

@media (max-width: 800px)
{ 
    /* styles for devices with screen smaller than 800px */ 
}

@media (max-width: 600px) 
{ 
    /* styles for devices with screen smaller than 600px */ 
}

不幸的是，使用基于表格的布局很难实现这一点，您链接的 JSFiddle 似乎就是这种情况。内联样式(例如: <div style="..."></div> )在不使用 !important 的情况下也很难与媒体查询级联。指令(这通常被认为是不好的做法)。

如果可能的话，我会考虑使用 CSS 类而不是内联样式将 HTML 重写为基于 div 的布局，然后实现媒体查询来解决此问题。

话虽如此，您可以尝试这样的临时解决方案:

@media (max-width: 600px) 
{
    #frmLogin table img 
    {
        display: none;
    }
    #frmLogin table td > div
    {
        width: 200px !important;
    }
    #frmLogin hr
    {
        width: 200px !important;
    }
}

这是 JS fiddle :http://jsfiddle.net/syQgH/2/