2012-09-24 53 views
2

我用http://reddit.com的網站,建立一個CSS網頁在邊欄始終保持在頁面上的相同尺寸的參考上,而整個左側逐漸在縮小屏幕確實。問題與網站,不結垢,以適應手機屏幕

sidebar{width:400px;float:right;/*rest doesn't matter*/} 
leftside{width:auto;height:auto;;overflow:hidden;/* no float */} // i think this 
// is where i missed up, reddit's site didn't have this 

不管怎麼說,這個網站將無法擴展移動設備上的所有,側邊欄佔據整個屏幕,但在Reddit上的網站好聽鱗片。我怎樣才能讓我的網站規模?我是否需要另一個div來包裹側面和左側?我想看看這個在線,但每個人都只是說不能用像素來定義側邊欄,但reddit的使用PX和它仍然縮放...

感謝

+0

reddit的具有不同的移動風格完全。但是你想要的是一個「響應式css框架」。 – sachleen

+0

哇真的嗎?每當我瀏覽他們的網站上看來,它只是桌面上,沒有移動/桌面選項 –

+0

@ LucasOu楊:你不重定向到它,但它可以通過http://i.reddit.com – Marcel

回答

3

如果在移動設備上的東西的規模可能是由於使用屏幕尺寸的媒體查詢,因爲在我的瀏覽器上,reddit的行爲與您的描述相同,側欄在調整它的大小時會佔用整個瀏覽器的大小直至移動設備的大小。 如果你希望它不要像reddit的行爲並在瀏覽器中,你可以eighter;使用媒體查詢以及瀏覽器的寬度,並根據這些規則調整邊欄的大小;使用某種JavaScript或HTML5和CSS的側邊欄設置成一個按鈕,使其擴大到整個畫面時的OnClick

+0

如何訪問媒體查詢有效嗎?我從來沒有聽說過這些使用CSS時?你的意思是寬度:em或width:%? –

+1

@ LucasOu楊:看到http://css-tricks.com/snippets/css/media-queries-for-standard-devices/關於使用媒體查詢提示。 – Marcel