在移动设备上，我如何使站点看起来完全不同？

Question

我已经做了一个网站，它在桌面上看起来很棒，但在移动平台上看起来非常糟糕，所以我要写一个和桌面版本一样质量的版本。

然而，我不知道如何做到这一点，我已经查了它，我发现有一件事告诉我使用以下代码；

<script>
if ("ontouchstart" in document.documentElement)
{
  // content for touch-screen (mobile) devices
}
else
{
  // everything else (desktop)
}
</script>

我想把html放在评论的位置，但我也不知道怎么写。有什么帮助吗？

Answer 1

您将希望在css文件中编写媒体查询。您可能需要对当前在您的网站上的一些样式具有创造性，但通常情况下，您将如何改变移动设备页面的外观。

@media (max-width: 767px) {
   css styles that need to be altered for mobile go here!
}

您还可以在媒体查询中使用min-width仅将栅格应用于大屏幕。

@media (min-width: 767px) {
   css styles that need to be altered for destop go here!
}

也有范围。

@media (min-width: 360px) and (max-width: 767px) {
   css styles for screens within this range go here!
}

Answer 2

你必须想出一个手机的设计，而不仅仅是试图使它适合屏幕。您可以使用CSS屏幕媒体查询实现响应。媒体查询基本上采用浏览器当前的分辨率(无论是桌面还是任何设备)，它将根据分配给媒体查询的内容自动调整所做的更改(如布局更改)。你也可以查找CSS框架，比如引导和顺风，它们有一个惊人的响应/流动组件。