div 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的一些特效展示。

相關閱讀:

css中的line-height

網頁隨機加載CSS樣式表

CSS做到完全居中的幾種方法。

未經允許不得轉載:西安王塵宇 » div css隱藏內容樣式方法(自適應頁面常用)

贊 (1)
一级A试看120秒