文章重點來介紹html+css配置wordpress主題在小屏幕的時候隱藏側邊欄的例子,有需要了解的朋友可進入參考.

看到標題好長啊,對于一個響應式web站點來說,很多功能都是通過 @media queries 和 Viewports 來實現哈,本站現在使用的也是html5的wordpress響應式主題,當然,還會有js來實現Responsive的,但本來就不了解這方面的知識,所以也就不敢描述了.

使用本主題也算是有好一段時間了,在小屏幕訪問的時候,老是看見加載了wordpress頁面側邊欄,就想把它棄掉,前段時間剛好看到了@media queries的一些東西,然后就打開主題的style.css文件看看,發現能改了.

下面是主題部分@media配置:

原來設置為,代碼如下:

1. @media screen and (max-width: 768px) { 
2. //開源軟件:Vevb.com 
3.  #content, 
4.  #sidebar { 
5.     float: left;  
6.     padding: 2%; 
7.     width: 96%; 
8.     display:none; 
9.  } 
10. } 

下面是通過此法禁止效果: