HTML CSS移动黑魔法

所以我犯了一个noob开发者的错误，在移动版之前制作了标准网页。所以，当我通过手机打开我的网页时，很自然，它完全是一团糟。我可以写一个移动css文件，并链接它，无论我是什么时候 我想知道是否有人知道我可以在我的文件中附加的任何黑色魔法html或css格式

我已经操纵了视口内容 显示宽度和@media，但我找不到解决方案

---

我是新来的，但是我已经承诺了，所以提前谢谢你

您可以使用此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">

---

希望这有帮助

简单的方法是将所有桌面特定代码移动到

最小宽度

媒体查询中，如下所示：

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

其中1000px是您的网站需要切换到移动风格的地方。这样，所有桌面CSS都将应用到第一个断点。在本例中，一旦低于1000px，特定于桌面的CSS将停止应用，移动CSS将接管

---

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

这确实有帮助，但对大多数人没有帮助。例如我的下拉菜单原来占屏幕的80%，现在可能是25px。看起来我必须为手机制作一个完整的css