2015-02-23 127 views
0

我正在嘗試使用CSS創建Reddit頁面。我的問題是縮放。我想製作一個長度較小的物體。在我的1080p顯示器上,它看起來不錯,但是當我放大或縮小時,它不會隨瀏覽器擴展。在手機上它也太大了。 下面是代碼:使用CSS進行縮放

#header { 
    background: url(%%rtv6a%%); 
    background-repeat: no-repeat; 
    background-position: -3px 24px; 
    height: 130px; 
} 
#header-bottom-left 
{ 
position: absolute; 
bottom: 0; 
} 

div.side div.spacer:nth-of-type(5) 
{ 
background:url(%%tangoglobe4%%) top center no-repeat; 
padding: 250px 0 0; 
margin-top: 20px; 
} 
div.side div.spacer:nth-of-type(5):hover 
{ 
background:url(%%goglobal4%%) top center no-repeat; 
padding: 250px 0 0; 
margin-top: 20px; 
transition: .6s; 
} 


body, .side, .titlebox form.toggle, .leavemoderator, .icon-menu a, .side .spacer 
{ 
background:url(%%whiteticks%%); 
} 
.sitetable 
{ 
background:url(%%ticks%%); 
} 
.morelink .nub 
{ 
display: none; 
} 
.sitetable 
{ 
max-width: 83%; 
border-color: #5C5C5C; 
border-style:solid; 
border-width:1px; 
} 

這是我希望它看起來像:http://i.imgur.com/CM1Ejgp.jpg 當我縮放:http://i.imgur.com/HGsnSvD.png 你會發現灰色框獲得更遠的父親了。我能做些什麼來解決這個問題? 對不起,我是新來的編碼。

+0

給了一個鏈接到網站,請 – 2015-02-23 05:29:34

+0

www.reddit.com/r/tangoworldwide – user2593789 2015-02-23 06:15:06

回答

0

你可能要考慮媒體的質疑:

媒體查詢一下該設備的能力,並且可以用來 檢查很多東西,比如:

  • 寬度和瀏覽器窗口的高度
  • 設備的寬度和高度
  • 方向(平板/手機處於橫向模式還是縱向模式?)
  • 分辨率
  • 和更

您可以使用媒體查詢根據瀏覽器的大小來設定大小和文本的寬度或容器中的CSS。例如:

@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
} 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries