css - 带有菜单的响应式 Logo 定位

标签 css html responsive-design

我正在学习响应式设计。现在我正在创建一个响应式网站。它有名称 Logo ,左右有两条水平线。 Logo 应位于顶部中心。在 Logo 下我必须放置菜单。在响应式设计 View 中它应该保持中心位置

最佳答案

您的问题太大了,无法在这里回答,但媒体查询正是您想要的。观看这个简短的 YouTube 视频,您将很快掌握基础知识

https://www.youtube.com/watch?v=fA1NW-T1QXc

头部的 HTML <meta name="viewport" content="width=device-width, initial-scale=1">

正文中的 HTML <div id="container"><div id="header">Logo</div></div>

CSS #container{width: 1000px; height: 500px;} #header{width: 1000px; height: 100px; text-align: center;} @media only screen and (max-width: 999px){#container{width:100%;}#header{width: 100%;background-color: blue;}}

这只是一个示例,只要您的屏幕宽度低于 999 像素,标题就会变成蓝色,并且会根据您的屏幕调整大小。

关于css - 带有菜单的响应式 Logo 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30724846/

相关文章:

javascript - Google Grid Gallery Safari 模态滚动

php - 无法制作表格。

css - 添加文本对齐 :center on small-12 class 的问题

html - 带有下拉菜单的语义 UI "three inline fields"

css - 在 wordpress 站点中带有内部按钮的输入字段

html - 使元素的高度适应内部的内容

javascript - 默认情况下,无法对齐底部有很多填充的 Google 自定义搜索引擎输入表单

html - CSS右侧边栏在浏览器调整大小时与页面内容重叠

html - 无法使移动响应

jquery - CSS 下拉菜单列表颜色在谷歌浏览器中悬停时不会改变