HTML CSS移动黑魔法

Question

，所以我使菜鸟开发人员误认为，并在移动版本之前制作了标准网页。因此，当我通过移动设备打开网页时，自然而然地弄乱了。我可以编写一个移动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)

在您的网站需要切换到移动样式的任何地方。这样，您的所有桌面CSS都将被应用于您的第一个断点。在此示例中，一旦获得1000px以下，您的桌面特异性CSS将停止应用，并且您的移动CSS可以接管。

将移动CSS放在所有媒体查询之外。一旦桌面CSS停止应用，浏览器将落回"默认"移动CSS。