如何在移动设备中使导航栏不中断?
Github仓库:https://github.com/Hampusm/hampusm.github.io
Css:
body {
margin: 0;
}
.navbar {
overflow: hidden;
background: #304352;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #304352, #d7d2cc);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 6px 16px;
text-decoration: none;
font-size: 17px;
font-family: monospace
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
background: #304352;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #304352, #d7d2cc);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
@viewport {
zoom: 1.0;
width: device-width;
}
<div class="navbar">
<a><b>HampusM</b></a>
<a href="http://hampusm.github.io">Home</a>
<a href="repositories.html">Repositories</a>
<a href="contact.html">Contact</a>
<embed style="float:right" , src="switch.svg" width="50" type="image/svg+xml" />
</div>
<div class="main">
<center>
<br>
<h1>Home</h1>
<br>
<!-- this br is meant to not end with a > -->
<br <div class="btn-group">
<a href="https://github.com/Hampusm"><button type="button" class="btn btn-primary">Github</button></a>
<a href="https://discord.gg/6T8BukM"><button type="button" class="btn btn-primary">Discord</button></a>
<a href="https://twitter.com/hampusm03"><button type="button" class="btn btn-primary">Twitter</button></a>
</div>
</center>
</div>
正如您所看到的,我确实使用了@viewport,但它仍然会中断。
是的,我试着用谷歌搜索,但我能找到答案。
它在桌面上的外观
它在移动设备上的外观
发布于 2018-06-10 05:36:58
将嵌入内容移出导航。把它放在你想要的地方
body {
margin: 0;
}
embed { position:absolute; top:0; right:0}
.navbar {
overflow: hidden;
background: #304352;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #304352, #d7d2cc);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 6px 16px;
text-decoration: none;
font-size: 17px;
font-family: monospace
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
background: #304352;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #304352, #d7d2cc);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
@viewport {
zoom: 1.0;
width: device-width;
}
<div class="navbar">
<a><b>HampusM</b></a>
<a href="http://hampusm.github.io">Home</a>
<a href="repositories.html">Repositories</a>
<a href="contact.html">Contact</a>
</div>
<embed src="switch.svg" width="50" type="image/svg+xml" />
<div class="main">
<center>
<br>
<h1>Home</h1>
<br>
<!-- this br is meant to not end with a > -->
<br <div class="btn-group">
<a href="https://github.com/Hampusm"><button type="button" class="btn btn-primary">Github</button></a>
<a href="https://discord.gg/6T8BukM"><button type="button" class="btn btn-primary">Discord</button></a>
<a href="https://twitter.com/hampusm03"><button type="button" class="btn btn-primary">Twitter</button></a>
</div>
</center>
</div>
https://stackoverflow.com/questions/50776607
复制相似问题