HTML CSS移动黑魔法

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

我操纵了视口内容显示宽度和@media，但解决方案无法解决。

再次，我是新的，但承诺提前感谢。

您可以使用这个CSS

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

的720像素是大多数智能手机的平均大小配置文件。您需要将这个元标记添加到您的HTML页面以及

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

希望这有助于

2017-02-21 03:58:37

这确实有帮助，但对大多数人没有帮助。例如。我原来80％的屏幕下拉菜单现在可能是25px。看起来我必须为移动设备制作一个完整的CSS – theloosegoos

最简单的方法是将您的所有特定的桌面代码为min-width媒体查询，看起来像这样：

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

其中1000px是您的网站需要切换到移动样式的任何地方。这样，所有的桌面CSS将被应用到你的第一个断点。在这个例子中，一旦你得到1000px以下，你的桌面特定的CSS将停止应用，你的移动CSS可以接管。

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

2017-02-21 03:59:37 Arnon

回答