网站不能正确调整分辨率。媒体查询或百分比？

Question

新来的CSS，HTML和Java，但即将完成我的第一个网站。道歉，如果这之前已经回答了，但我一直在试图解决这个问题，我一直在疯狂的几天。

我在1366 x 768创建了我的网站，因此相应地调整了最大宽度/高度，但是由于在Macbook air（分辨率1440x900）上测试网站，我遇到了有关内容大小和空白的问题。

我更新了最大宽度为1440，这似乎排列了水平空白区域，但是无论我做什么，页脚下方的空间都保持不变。

有没有办法通过分辨率来调整上下方向？媒体查询是答案还是我要回去重新设计我的网站？

任何帮助将不胜感激。

Answer 1

您可以使用此风格：

@media screen and (min-device-width: 1366px) { 
} 

Answer 2

我建议你使用bootstrap grid如果你不是很熟悉，响应式设计。每个div从.col-md-1类获得。 （总和等于12）。

用这个网格系统你可以看到每个分辨率的元素都很好。

Answer 3

在CSS中，您可以添加多个@media屏幕尺寸，并根据所用设备的尺寸设置填充和边距。例如，目前我正在使用的网站对于3种不同的设备尺寸具有不同的样式。

@media (min-width: 1366px) { 
    body{ 
    width: 100%; 
    clear: left; 
    white-space: nowrap; 
    } 
} 

像这样的东西可能是有帮助的