2015-02-23 57 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