操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

主要代碼：

	
	
	 
  
	


	
	<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>

主要思想就是：

其實這樣的設計，也叫做響應式Web設計，那么一般響應式Web設計，我們遵循的原則是: 移動優先，漸進增強。

此例中無序列表做導航條，就是采用了移動優先的策略。

但是，

雖然我們在桌面版的網頁上可以實現這個效果（本文最開頭），，但若你此時打開移動端的網頁，會發現，導航條的寬度為980px

為什么會這樣呢？

其實啊，在我們的響應式Web開發中，視口是一個很重要的概念，在這里介紹兩個主要的：理想視口，默認視口。

因此無序列表做導航條，也就是說，上面的代碼中，雖然使用了媒體查詢，但是在移動端仍然使用的是相對默認視口進行布局，我們可以通過設置meta標簽進行轉換為理想視口。