06.26 css隱藏內容樣式方法（自適應頁面常用）

H5自適應網站製作時經常會遇到的一個問題，電腦端頁面縮小到手機端頁面內後發現有些欄目，有些圖片太大或者影響美觀，那麼這個問題在嗎解決呢？

手機端最典型的就是iphoenplus最大寬度是414目前市場上佔有率最大的大屏手機也差不多是這樣，所以就可以寫成當屏幕尺寸小於414px的時候屏幕下面所有的樣式，為了不產生屏幕大小不一產生不同的樣式錯亂，所以這裡建議寫到480px，這樣就囊括了基本上所有的手機屏幕了。

然後接下來就是隱藏手機屏幕下不該顯示的內容，比如手機端我不想讓別人看到我的友情鏈接，或者不想讓顯示出來太大的幻燈片。都可以用 display:none;這個命令來實現。

@media only screen and (max-width: 480px){

.footer {

display: none;

}

}

css隱藏內容主要分為3總情況：

①隱藏所有內容無空白：display: none;

②隱藏溢出的文字或圖片：overflow:hidden;

③隱藏內容但是仍然佔據空間：visibility:hidden;

網站自適應css隱藏只是基礎知識，對於隱藏最常見的用途就是js的一些特效展示。