html - 带显示器的基本布局 : grid (CSS Grid) for Phone, 平板电脑和台式机

标签 html css media-queries

有人有标题中要求的工作示例布局吗?我还需要一个带有 <nav> 的主导航它在全局范围内用于手机、平板电脑和台式机。

布局应使用以下 HTML5 元素:

<nav> for the Main Navigation
<header> for Title, Logos, Burger-Menue-Button
<main> for the main Content
<footer> for Footer Content

断点是:

  • 手机从 0px 到 599px
  • 600 像素到 1023 像素的平板电脑
  • 桌面所有 ViewPorts 至少为 1024px

导航栏应显示在手机和平​​板电脑的左侧,可以通过 Burger-Menue-Button 打开。对于桌面,导航栏位于顶部 <header> 之间和 <main>

非常感谢您的工作示例代码和您的帮助:) 祝你有美好的一天:)

最佳答案

你能用 Bootstrap 设计来解决这个问题吗?

http://getbootstrap.com/

关于html - 带显示器的基本布局 : grid (CSS Grid) for Phone, 平板电脑和台式机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44049944/

相关文章:

javascript - 当光标离开一定距离时,图像是否可能不移动到光标?

html - 为什么相同的 CSS 代码在外部文件中不起作用?

JavaScript 与媒体查询

html - div/body height 100%固溶

html - 隐藏元素,但显示 CSS 生成的内容

html - CSS/HTML - 正确设置选择框的样式

css - 媒体查询到 Zurb Foundation 4 的中心图像

javascript - 隐藏和重置功能无法正常工作

javascript - onClick javascript : navigation with changing css background images/two types

css - 针对大部分智能手机的媒体查询