网页与屏幕尺寸的差异

Question

我一直在处理一个网页（First Day），在我的一个屏幕上看起来我想要它。屏幕尺寸为1920 X 1080.但是，在较小的屏幕上它看起来不同。如何将我的网页调整到所有屏幕尺寸的外观和感觉？

我在互联网上环顾四周，发现地方说不太可能，其他人只是说这需要做很多事情。我希望得到一些有用的帮助和意见。

谢谢

Answer 1

首先，为了使您的页面在所有分辨率下都能正常工作，您需要学习如何制作响应式布局，这些布局将适应每种分辨率的屏幕。

尝试使用百分比和display: table，除非display: block（最好在图片中使用块）。

你的文字：

  

10月15日星期三晚上7点开始。辣椒在下午6点供应。

正在破坏你的布局，因为它超出了你的mainContent Div的高度，如果你将mainContent div的高度更改为50％并添加display: table，你的布局就不会再破坏了。

对于分辨率为1366x768或更小的屏幕，您的图像太大，请尝试使用百分比定义图像的高度，这将使您的图像始终以适合将要加载的屏幕的大小显示。

您有三个主要的div：header，mainContent和footer，并且您希望显示整个网站而不显示滚动条，好吧，如果您有三个主要div它们是网站，设置div的高度，使它们互补，不超过网站的限制，如：

header: height: 10%
mainContent: height: 60%
header: height: 30%

这不是拯救你生命的代码，而是制作网站布局的新愿景的开始。 ：）