2

我希望网站周围有一个灰色边框，供具有屏幕风景的用户处理，但内容是必须出现的最重要的东西 - 特别是对于那些没有足够宽屏幕的人（边框不应该为他们显示或被切断或诸如此类）。我当前的 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 解决方案持开放态度。

4

4 回答 4

5

您可以考虑使用CSS 媒体查询，以使您的网站响应用户的视口大小。

例如，在你的 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（这通常被认为是一种不好的做法）。

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

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

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

这是 JS 小提琴：http: //jsfiddle.net/syQgH/2/

于 2013-06-26T14:56:15.503 回答
1

媒体查询是一个很好的答案。其实就是HTML5标准给出的答案。

它得到广泛支持：

http://caniuse.com/#feat=css-mediaqueries

围绕媒体查询功能构建了许多工具。

几个例子：

  • 我最近发现了这个，这是一个响应式设计的在线编辑器，相当令人印象深刻：http: //froont.com/

  • Twitter bootstrap也解决了这个问题。

于 2013-07-02T15:09:45.173 回答
1

您正在寻找响应式设计。

尝试使您body的全宽#content，例如 80% 宽。然后丢掉 200px 的边距并简单地将 80% 居中。

http://jsfiddle.net/daCrosby/syQgH/5/

相关CSS：

body{
    margin: 20px 0px;
}
#content {
    width: 80%;
    margin:auto;
}

您将要做的下一步是丢失所有px宽度和高度，并用基于 % 的值替换宽度（只是丢失高度 - 浏览器会计算出来；max-width如果需要，可能会添加）。

然后，正如其他人所指出的那样，使用@media查询为几个浏览器宽度设置理想的大小（例如，也许 make #content's width 95% on @media (max-width: 600px).

于 2013-07-02T15:20:03.473 回答
-1

在您的 HTML 中，您可以使用

<meta name="viewport" content="width=device-width" />

这将强制您页面的“100%”成为设备的宽度。

于 2013-06-26T14:00:19.053 回答