文章重點(diǎn)來介紹html+css配置wordpress主題在小屏幕的時(shí)候隱藏側(cè)邊欄的例子,有需要了解的朋友可進(jìn)入?yún)⒖?

看到標(biāo)題好長啊,對(duì)于一個(gè)響應(yīng)式web站點(diǎn)來說,很多功能都是通過 @media queries 和 Viewports 來實(shí)現(xiàn)哈,本站現(xiàn)在使用的也是html5的wordpress響應(yīng)式主題,當(dāng)然,還會(huì)有js來實(shí)現(xiàn)Responsive的,但本來就不了解這方面的知識(shí),所以也就不敢描述了.

使用本主題也算是有好一段時(shí)間了,在小屏幕訪問的時(shí)候,老是看見加載了wordpress頁面?zhèn)冗厵?就想把它棄掉,前段時(shí)間剛好看到了@media queries的一些東西,然后就打開主題的style.css文件看看,發(fā)現(xiàn)能改了.

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

原來設(shè)置為,代碼如下:

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

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