Question

我是第一年的学生软件工程，我用来做一个网页的作业。它并不复杂，但在写完网页后，我意识到当你以较小的分辨率（比我的1080p）设备打开网站时，它并不适合。我不知道什么决议使用了将要评估我的老师，所以我想至少修改1600; 900和1336：768的网站。我应该说我使用了其他建议，我应该将div标签除以％而不是像素，但它仍然不起作用。我搜索了问题，我想我找到了一个解决方案 - 实际上它是@media的一个地方，你可以提前为不同的屏幕分辨率设置不同的百分比，然后你得到cliend屏幕分辨率并以适当的比例打开它

所以我想问你怎么写这个？您可以查看我的网页here

Answer 1

答案实际上取决于您的网站是多么复杂，布局是什么样的，以及在什么尺寸下需要做哪些元素。

一般来说，HTML是＆＃34;流畅的＆＃34;默认情况下，文本将换行，元素将调整大小以适应其内容，因此如果您的设计过于简单，则不应该做任何事情。

当您开始使用绝对/静态像素大小调整大小时，您会遇到不再适应的情况。

通常应该避免使用固定像素大小的设计，并允许元素在HTML设计时自然地重新调整大小。

@media查询适用于更改特定分辨率下的外观，并且通常设置为使响应＆＃34;设计，元素可以改变样式或隐藏/显示不同的分辨率。这通常用于更复杂或动态的布局，并且仍然需要相应地进行规划，因为它通常设置为适应一系列分辨率。例如，一个元素可能是0到1024像素宽的100％宽，当窗口宽度超过1024像素时变为50％宽。

对于您的网站，您可以通过浮动所有内容来打破它。 float往往在CSS中过度使用而不了解其副作用。

从width元素中删除menu，然后从width元素中删除float和content。

这将使菜单与其内容（按钮）和＆＃34;浮动＆＃34;一样宽。在内容旁边，它将尝试100％宽，但要缩小以允许菜单适合它。

Answer 2

祝你在学校好运，你需要阅读通过CSS实现的responsive设计。例如。

@media screen and (min-width: 500px) {
  // Write your style
}
@media screen and (min-width: 501px){
  // Write your style
}

这就是你需要做的，有很多文档和教程，你可以毫无困难地找到资源。

这是一个TutsPlus页面，可以帮助您入门：Tutorial link

网页不同的分辨率拟合

2 个答案: