html - 如何为桌面和移动网站提供不同的布局？

Question

标题部分的导航链接部分是下拉菜单，但在桌面网站中它是全宽导航，轮播在移动版本中位于页面底部，而在桌面版本中显示在页面顶部。如何我可以为网站的桌面版和移动版提供不同的布局吗？请帮忙!

Answer 1

您的描述不太好，但我假设您希望在移动设备上使用最小化菜单，但在台式机/笔记本电脑上使用完整版本。您不能仅使用 HTML5 来改变这一点，您必须使用媒体查询。

这是我使用的一些示例，将它们放在底部 pref 的包含的 CSS 文件中:

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    /*Insert your tablet CSS in here!
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    /*Insert your mobile CSS in here!
}

希望对您有所帮助， 中号