Question

所以我做了一个noob开发人员的错误，并在移动版之前制作了标准网页。所以，当我通过手机打开我的网页时，它完全搞砸了。我可以编写一个移动css文件并将其链接起来想知道是否有人知道任何黑魔法html或css格式化我可以附加到我的文件作为修复。

我操纵了视口内容显示宽度和@media，但解决方案使我望而却步。

我再次成为新人，但我还要提前致谢。

Answer 1

您可以使用此CSS

配置文件

@media only screen and (max-width: 720px) {
    body {
        background-color: lightblue;
        margin: 0px;
    }
}

720px是大多数智能手机的平均尺寸。您还需要将此元标记添加到您的html页面

<meta name="viewport" content="width=device-width, initial-scale=1">

希望这有帮助

Answer 2

简单的方法是将所有特定于桌面的代码移动到min-width媒体查询中，如下所示：

@media screen and (min-width: 1000px)

凡1000px是您的网站需要切换到移动样式的地方。这样，您的所有桌面CSS都将应用到您的第一个断点。在此示例中，一旦达到1000px以下，您的桌面专用CSS将停止应用，您的移动CSS可以接管。

将移动CSS置于所有媒体查询之外。一旦桌面CSS停止应用，浏览器将回退到“默认”移动CSS。