Question

我正在设计一个响应式网页。实际上发生了什么，虽然我设置我的标题和包装的宽度仍然与屏幕尺寸仍然我认为它占用更多的空间，因为在屏幕下方出现水平滚动条，按钮的位置也因显示而异虽然我正在拍摄屏幕尺寸px 这是代码

test "unsuccessfull editing of the scoreboard" do
    log_in_as(@user)
    get edit_scoreboard_path(@scoreboard)
    assert_template 'scoreboards/edit' (doesn't work)
    patch scoreboard_path(@scoreboard), scoreboard: { name_of_scoreboard: "a"* 51,
                                                      name_of_organization: "b"*60,
                                                      name_of_activity: "c"*60 }
    assert_template 'scoreboard/edit' (doesn't work)

  end

Answer 1

我建议您使用media queries而不是js。只有当你试图支持veeery旧浏览器时，才有可能需要js来进行过继布局。对于每个现代浏览器，只需使用media queries即可。您可以在链接上阅读的基本信息：media queries

顺便说一下，您可以查看热门的过继性CSS框架，例如bootstrap ，foundation 或其他。它们可以从盒子中提供或多或少的完整采用性，您可以根据自己的需要进行自定义。

Answer 2

好的，这里有很多东西。在基本层面上，您可以将Web前端视为在内容（HTML），样式（CSS）和动画/交互（JavaScript）之间划分。我有点过分简化，因为你可以在CSS中做动画，而JavaScript变得更加复杂和重要，但在基本层面上，这种思维方式有效。

因此，在HTML文件中，您应该定义页面的内容。然后链接到CSS文件，您可以在其中定义样式和外观。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

在CSS中，您可以使用媒体查询根据窗口大小定义样式，这将有助于您创建响应式网站。媒体查询是响应式网络的行业标准。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如果您的网站变得更复杂，您可能需要考虑使用前端CSS框架，例如Bootstrap或Foundation。这些都是从头开始构建的，以支持响应式网页设计，并将抽象出其中的许多复杂性。

如何删除空白区域

2 个答案: