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

【问题标题】：How to fit your website for all or at lest most screen resolutions?如何使您的网站适合所有或至少大多数屏幕分辨率？
【发布时间】：2013-12-12 01:31:47
【问题描述】：

我在设计网站时遇到的主要问题之一是屏幕分辨率的多样性。首先，我在我的 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

【问题讨论】：

标签： html css css-position screen-resolution absolute

【解决方案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 Desktop，您可以输入 width:20px; 或其他任何内容。

希望这会有所帮助。

【讨论】：