目錄

?

?

基本概念

關鍵代碼

---

?

基本概念

這里是用css來搞的，本人的開發環境為Vue cli

IDE為 webStorm。

這里使用

這個 @media screen and (XXXXXX)老瀏覽器是不支持的！！！

當分辨率小了就會調用這個代碼

隱藏某div或者nav可以使用

visibility hidden或者 opacity 0 這些操作都是很騷氣的

這個還是很有用的。

?

關鍵代碼

程序結構如下：

代碼如下：

html, body{XXXXX }body{background-image url("../images/bg2.png") }.top {XXXXX }.middleContent {XXXXX }.bottom {XXXXX }/*導航頁*/ .leftNav {XXXXX } .rightContent {XXXXX }@media screen and (max-height:800px){body{XXXXX}.bottom{visibility:hidden} }@media screen and (max-width:800px){body{background-image url("../images/bg.gif")}.leftNav {float: left;width: 0px;opacity 0}.rightContent {margin-left: 0px;}.bottom{visibility:hidden} }

?

總結

以上是生活随笔為你收集整理的前端笔记-css实现web自适应（当像素小于xx时隐藏此div）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。