Question

这是我的网站：http://foxweb.marist.edu/users/kf79g/contact.php

测试网站：http://www.responsinator.com/?url=http%3A%2F%2Ffoxweb.marist.edu%2Fusers%2Fkf79g%2Fcontact.php

在我的联系页面上，我希望表单以及文本和图标在所有屏幕尺寸上尽可能大，并且在页面上居中。特别是在像平板电脑这样的中型屏幕上（参考测试网站链接），您可以看到页面上有大量的空白区域，内容本身非常小。这就是为什么我希望通过使一切更大来使页面更易于查看。

我的所有代码都位于这些文件下的页面源代码中（右键单击浏览器上的查看源代码后）：

screen_styles.css

screen_layout_large.css

screen_layout_small.css

screen_layout_medium.css

contact.php

我尝试了解我的所有知识，但事实证明我没有成功。我尝试尽可能地将整个事物集中在一起，但它在中小屏幕上并不完全（请参考如何设置表格和图标以查看测量结果是否已关闭）。在小屏幕上，它通过走出页面来破坏我的响应式设计。完成后，我的网站将最终完成。请帮帮我，我需要尽快完成这项工作。我真的很感激任何帮助。

Answer 1

使用媒体查询（您决定断点值）并为#contact_section添加新样式，如下例所示

@media screen and (max-width: 640px){
    #contact_section {
        float:none;
        display: block;
        width: 96%;
        padding: 2%;
        box-shadow: none; /*if don't want any shadow*/
    }
}

p / s：640px是断点值的示例

如何居中并使此页面的内容更大？

1 个答案: