HTML网站在移动视图中显示的问题[关闭]

Question

我知道我的网站很糟糕，但现在这不是我的问题。这只是一个学校作业页面。我的问题是，当在移动视图中实际查看我的网站时，样式没有正确响应。在移动视图中，有一个汉堡包菜单代替导航栏。任何人都可以看看我的网站，让我知道发生了什么？ https://aliciareneesnow.github.io/assignments/lesson-7/franklin-7.html

Answer 1

您的媒体查询设置为隐藏汉堡包的宽度为375或更高，并显示相同的UL导航。

此宽度非常小，可能比您的移动显示屏小。

尝试将媒体查询增加到以下内容：

@media only screen and (min-width: 768px)

（仅作为示例）演示它在您的移动环境中正常工作。

注意：768是bootstrap上的折叠宽度，供参考。

Answer 2

对于样式，我通常使用4个媒体查询。

全屏宽度

@media only screen 
and (min-width : 1000px), print and (min-width: 1000px) {

冷凝

@media only screen 
and (min-width : 744px)
and (max-width : 999px) {

可扩展性

@media only screen 
and (max-width : 744px)
and (min-width : 481px) {

和移动

@media 
only screen and (max-width : 480px),
only screen and (min-device-width : 320px) and (max-device-width : 480px) { 

我将我的css文件设置为full.css，condensed.css，scalable.css和mobile.css，并且还有一个style.css，用于默认样式，如跨所有视图大小的颜色和样式。

这已被证明是成功的，并且易于在所有设备和屏幕尺寸上进行管理。一旦拥有了良好的结构，就可以根据需要在每个查询中显示和隐藏内容。

调整宽度后，应该可以使代码在各种设备上显示得更好。