Question

设计网站时遇到的主要问题之一是屏幕分辨率的多样性。首先，我在我的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和一些平板电脑，但绝对不是移动设备或大型计算机屏幕。

我的网站：Website Project on SmartPhone Photography

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

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

Answer 1

听起来你应该回应。然后，您可以调整视口。使用媒体查询或使用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代替字体，%代表宽度。并不意味着您不应该使用像素，请记住查询是特定的，因此对于992px桌面，您可以放置width:20px;或其他。

希望这会有所帮助。

如何使您的网站适合所有或至少大多数屏幕分辨率？

1 个答案: