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

我在设计网站时遇到的一个主要问题是各种屏幕分辨率。首先，我在我的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×768所需的空间。

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

来源

2013-09-26 TheAmazingKnight

听起来像你应该去响应。然后你可以调整你的视口。使用媒体查询或使用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;或其他什么。

希望这会有所帮助。

来源

2013-09-26 21:12:04 m33bo

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

回答

相关问题