Web小技术之实现响应式导航条

最新推荐文章于 2024-04-27 21:35:02 发布

shandamengcheng

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量971

点赞数 1

分类专栏： WEB大类文章标签： web js css

本文链接：https://blog.csdn.net/shandamengcheng/article/details/106043930

版权

WEB大类专栏收录该内容

5 篇文章 0 订阅

订阅专栏

主要代码：

<!DOCTYPE html>
<html>
<head>
	<title>Responsive Navigation Bar</title>
	<link rel="stylesheet" type="text/css" href="node_modules\@fortawesome\fontawesome-free\css\fontawesome.css">
	 <link href="node_modules\@fortawesome\fontawesome-free\css\brands.css" rel="stylesheet">
  <link href="node_modules\@fortawesome\fontawesome-free\css\solid.css" rel="stylesheet">
	<style type="text/css">
		* {
			box-sizing: border-box;
			padding:0;
			margin:0;
		}
		body {
			font-family: 'Josefin Sans',sans-serif;
		}
		.navbar {
			font-size: 18px;
			background-image:linear-gradient(260deg,#2376ae 0%, #c16ecf 100%);
			border:1px solid rgba(0,0,0,0.2);
			padding-bottom: 10px;
		}
		.main-nav {
			list-style-type: none;
			display:none;
		}
		.main-nav li {
			text-align:center;
			margin:15px auto;
		}
		.nav-links, 
		.logo {
			text-decoration:none;
			color:rgba(255,255,255,0.7);
		}
		.logo {
			display:inline-block;
			font-size: 22px;
			margin-top:10px;
			margin-left:20px;
		}
		.navbar-toggle {
			position:absolute;
			top:10px;
			right:20px;
			cursor:pointer;
			color:rgba(255,255,255,0.8);
			font-size:24px;
		}
		.active {
			display:block;
		}
		
		/*针对桌面网页设计*/
		@media all and  (min-width:768px) {
			.navbar {
				display: flex;
				justify-content: space-between;
				padding-bottom:0;
				height:70px;
				align-items:center;
			}
			.main-nav {
				display: flex;
				margin-right:30px;
				flex-direction: row;
				justify-content: flex-end;
			}
			.main-nav li {
				margin:0;
			}
			.nav-links {
				margin-left:40px;
			}
			.navbar-toggle {
				display: none;
			}
			.logo:hover,
			.nav-links:hover {
				color:rgba(255,255,255,1);
			}
		}
	</style>
</head>
<body>
	<nav class="navbar">
		<span class="navbar-toggle" id = "js-navbar-toggle">
			<i class="fas fa-bars"></i>
		</span>
		<a href="#" class="logo">logo</a>
		<ul class="main-nav" id="js-menu">
			<li>
				<a href="#" class="nav-links">Home</a>
			</li>
			<li>
				<a href="#" class="nav-links">Products</a>
			</li>
			<li>
				<a href="#" class="nav-links">About Us</a>
			</li>
			<li>
				<a href="#" class="nav-links">Concat Us</a>
			</li>
			<li>
				<a href="#" class="nav-links">Blog</a>
			</li>
		</ul>
	</nav>
	<script type="text/javascript">
		let mainNav = document.getElementById('js-menu');
		let navBarToggle = document.getElementById('js-navbar-toggle');
		navBarToggle.addEventListener("click",function(event) {
			mainNav.classList.toggle("active")
		})
	</script>
</body>
</html>

主要思想就是：

其实这样的设计，也叫做响应式Web设计，那么一般响应式Web设计，我们遵循的原则是: 移动优先，渐进增强。
此例中，就是采用了移动优先的策略。

但是，

虽然我们在桌面版的网页上可以实现这个效果（本文最开头），，但若你此时打开移动端的网页，会发现，导航条的宽度为980px

为什么会这样呢？
其实啊，在我们的响应式Web开发中，视口是一个很重要的概念，在这里介绍两个主要的：理想视口，默认视口。

什么是默认视口
当我们直接把桌面版的网页在移动端打开时，设备的宽度发生变化，那么网页也会随之发生变化。 在IOS中，会把桌面版的网页相对于980px进行布局，然后进行压缩，展示到移动端上。 在上面的动图中，会发现，导航条的宽度确实为980px
什么是理想视口
理想视口，就是指网页的布局宽度为设备的真实宽度。在这里就是指，假设我们的移动端宽高为：375 x 667 px ,那么理想情况下就是根据宽度375px进行布局。

因此，也就是说，上面的代码中，虽然使用了媒体查询，但是在移动端仍然使用的是相对默认视口进行布局，我们可以通过设置meta标签进行转换为理想视口。

<meta name="viewport" content="width=device-width,initial-scale=1">

shandamengcheng

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Web小技术之实现响应式导航条

主要代码：<!DOCTYPE html><html><head> <title>Responsive Navigation Bar</title> <link rel="stylesheet" type="text/css" href="node_modules\@fortawesome\fontawesome-free\css\fontawesome.css"> <link href="node_modules\.
复制链接

扫一扫