javascript - 创建响应式网页标题的笨拙方式？
问题描述
我目前有一个在桌面上运行良好的网站标题。我最初计划堆叠内容，以便页面随后显示在徽标下。我已经看到用于下拉菜单的汉堡菜单，这是我最终想要实现的，保留左侧的徽标。
我知道这可能需要时间，但我想我快到了。我只是认为让相同的元素响应比创建两个单独的标题和切换可见性更容易。
所以目前我有这个：
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
.mobile-header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.mobile-logo-container {
float: left;
width: 60%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.mobile-navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.mobile-logo {
height:8vh;
max-width: 60vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:2vh;
display: block;
object-fit: contain;
}
@media only screen and (max-width: 500px) {
.header {
visibility: hidden;
}
}
@media only screen and (max-width: 500px) {
.header-container {
visibility: hidden;
}
}
@media only screen and (max-width: 500px) {
.logo-container {
visibility: hidden;
}
}
@media only screen and (max-width: 500px) {
.navigation-container {
visibility: hidden;
}
}
@media only screen and (max-width: 500px) {
.logo {
visibility: hidden;
}
}
@media only screen and (min-width: 501px) {
.mobileheader {
visibility: visible;
}
}
@media only screen and (min-width: 501px) {
.mobile-header-container {
visibility: visible;
}
}
@media only screen and (min-width: 501px) {
.mobile-logo-container {
visibility: visible;
}
}
@media only screen and (min-width: 501px) {
.mobile-navigation-container {
visibility: visible;
}
}
@media only screen and (min-width: 501px) {
.mobile-logo {
visibility: hidden;
}
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="mobile-header">
<div class="mobile-header-container">
<div class="mobile-logo-container">
<img class="mobile-logo" src="/logo.png" alt="Logo">
</div>
<div class="mobile-navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="headerfill">
</div>这看起来不错，适合桌面使用。我只需要他们在移动设备上调整元素时以某种方式做出响应。
图标不必切换，我知道如果需要可以使用事件侦听器来完成。只是不确定如何在不创建两个单独的标题的情况下在移动设备上以不同的方式设置原始元素的格式。
希望这张图片能很好地说明我的目标。我第一次尝试这种下拉导航，所以提前感谢:)
UPDATE
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet3.1.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>希望这可以帮助。我需要找到一种方法将该设计（使用我已有的代码）与@Nyan 的答案结合起来。我已经删除了媒体查询以及单独的移动和桌面标题。想不通这个。
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
@media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}<header>
<a href="" class="logo">logo</a>
<button>menu</button>
<nav>
<a href="">Page1</a>
<a href="">Page2</a>
<a href="">Page3</a>
<a href="">Page4</a>
</nav>
</header>它会以这种结构运行，但保留最初的设计。（上图）
解决方案
您可以只创建按钮，它在大屏幕上隐藏并在小屏幕上可见，并在其上侦听点击事件。或者，如果您根本不想创建新元素，您可以使用::afterand ::before，然后聆听它们。
例如，Listener 可以切换active列表中的类。
列表本身可以绝对定位到标题的底部，并且在没有active类时隐藏。
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
@media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}<header>
<a href="" class="logo">logo</a>
<button>menu</button>
<nav>
<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>
</nav>
</header>哪一个步骤会引起您更多的问题？
推荐阅读
- r - R: Error in parLapply - $ invalid for atomic vectors only occurs running in parallel
- node.js - How to update a key of object with value in json column with knexjs?
- oracle - What does '%TYPE' mean following a parameter in procedure?
- phpunit - 如何断言数组包含与预期正则表达式匹配的元素？
- css - 设置 div 背景图像不透明度
- numpy - 加速涉及数组切片和广播的numpy代码
- ios - iOS Cordova 项目：添加 urbanairship-cordova 在构建时导致错误 65
- perl - 如何在 perl 中解决“没有这样的文件或目录”？
- java - 尝试读取文本文件时出现 IO 异常错误
- django - Django：使用带注释的查询集形成 ModelMultipleChoiceField