1

我在设计网站时遇到的主要问题之一是屏幕分辨率的多样性。首先，我在我的 1366 x 768 电脑上进行设计，它看起来很完美！然后在 27 英寸 Mac 上，它有很大的空间可以在内容中使用高度。就像屏幕分辨率越小，你必须担心宽度，而随着它变大，高度。所以，我的问题解决屏幕分辨率和空间的根本因素是什么？我听说过百分比、单独的媒体样式表和响应式可以解决问题，但这些真的是解决问题的方法吗？它会导致任何其他设计冲突吗？

尽管我不确定，但我认为需要在以下地方进行更改：

section > div{
    font-weight:bold;
    font-size:30px;
    color:#000000;
    display:inline; /*fixed size based only what is in the element*/
    width:30%; /*restrict the width size, default with inline property is 100%*/
    /*max-height:85%;*/ /*restrict height size*/
    padding:5px; /*a little pad from the edges are good*/
    margin-top:10px; /*align the same as the other elements*/
    margin-bottom:100px;
    margin-left:100px;
    margin-right:100px;
}
#message{ /*move element freely inside section; placed where desired*/
    position: absolute; 
    top:120px;
    left:-75px;
    right:100px;
    min-height:310px; /*same height across all content pages*/
    min-width:550px; /*same width across all content pages*/
    font-size:20px;
}

以防万一，我在 jsfiddle 中的完整 css 代码：JS Fiddle

我想通过我的网站覆盖大多数目标受众，而现在，它只适用于 1024 x 768 和一些平板电脑，但绝对不适用于移动设备或大屏幕电脑。

我的网站：智能手机摄影网站项目

您会看到内容如何与背景图像对齐。相机在右侧，内容在左侧，不像在移动设备上那样触摸或关闭背景的相机部分。还有一点，在电脑大屏幕上，内容的顶部和底部空间太大，就好像它在固定高度的中间一样。随着屏幕的高度变大，我希望内容具有较小的垂直滚动按钮并填充所需的空间，因为它看起来在 1024 x 768 上。

我真的很感激这个问题的答案，以及将来如何解决所有媒体的屏幕分辨率的参考。这个网站非常适合测试多种屏幕分辨率。ViewLike.US

4

1 回答 1

2

听起来你应该去响应。然后你可以调整你的视口。使用媒体查询，或者如果使用像Bootstrap这样的选项。这是一个媒体查询示例：

/***************
TABLET */

@media (min-width: 768px) {
    body{
        /*Put all your secific styles here*/
    }
}

/***************
DESKTOP NORMAL*/
@media (min-width: 992px) {
body{
    /*Put all your secific styles here*/
}

不幸的是，这不像写一行并独立修复所有内容那么容易。

注意：如果响应，使用em's 字体，%宽度。并不意味着您不应该使用像素，请记住查询是特定于992px桌面的，您可以放置width:20px;​​或其他任何内容。

希望这可以帮助。

于 2013-09-26T21:12:04.267 回答