2012-07-20 84 views
0

如何讓我的頁面對齊以適合任何屏幕尺寸,例如,查看此鏈接以便更好地理解https://dl.dropbox.com/u/8542058/Photo%20Jul%2012%2C%209%2056%2026.png 如果您注意到在上面的鏈接中,一旦屏幕被調整,屏幕上的圖像將自行調整並相應地呈現屏幕形狀。現在我想對我的頁面做同樣的事情,我的演示頁面可以在http://jsfiddle.net/529Lk/show/上找到,代碼是http://jsfiddle.net/529Lk/。感謝CSS3根據屏幕尺寸重新調整頁面大小/顯示屏

,方便查看我的代碼還在這裏:

CSS3:

body{ 
font-family: Arial, "MS Trebuchet", sans-serif; 
color:#000; 
background:#088A08; 
font-weight: bold; 
margin:auto;   
} 
/* SLIDE Start */ 

input[id=slideThree] { 
visibility: hidden; 
} 

/* SLIDE THREE */ 
.slideThree { 
width: 120px; 
height: 45px; 
background: #0101DF; 

-webkit-border-radius: 30px; 
-moz-border-radius: 30px; 
border-radius: 30px; 
position: relative; 

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); 
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); 
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); 
    position:relative; left:450px; 
} 

.slideThree:after { 
content: 'OFF'; 
font: 19px/26px Arial, sans-serif; 
color: #fff; 
position: absolute; 
right: 10px; 
z-index: 0; 
font-weight: bold; 
text-shadow: 1px 1px 0px rgba(255,255,255,.15); 
} 

.slideThree:before { 
content: 'ON'; 
font: 19px/26px Arial, sans-serif; 
color: #fff; 
position: absolute; 
left: 10px; 
z-index: 0; 
font-weight: bold; 
} 

.slideThree label { 
display: block; 
width: 50px; 
height: 40px; 

-webkit-border-radius: 50px; 
-moz-border-radius: 50px; 
border-radius: 50px; 

-webkit-transition: all .4s ease; 
-moz-transition: all .4s ease; 
-o-transition: all .4s ease; 
-ms-transition: all .4s ease; 
transition: all .10s ease; 
cursor: pointer; 
position: absolute; 
top: 3px; 
left: 3px; 
z-index: 1; 

-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
background: #fcfff4; 
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0); 
} 

.slideThree input[type=checkbox]:checked + label { 
left: 68px; 
} 

.back { width:598; height:95px; background:url('http://i1159.photobucket.com/albums/p637/Apulo_Cosmas/btn_push01c2x.png') no-repeat;  } 

HTML:

<div class="back" id="toggle"><br/> 
<label for="enjoy_web"></label> 
<div class="slideThree"> 
<input type="checkbox" value="None" id="slideThree" name="check" /> 
<label for="slideThree"></label> 
</div> 
</div> 

<br/><br/><br/> 

<img src="http://i1159.photobucket.com/albums/p637/Apulo_Cosmas/btn_push01a2x.png"/>​ 

回答

2

如果你的意思是如果我要縮小瀏覽器,它仍然適合?這就是你所說的流體寬度風格。這可以通過使用寬度百分比來完成。另一方面,如果要根據屏幕分辨率將不同的樣式應用於頁面,則可以使用媒體查詢:http://webdesignerwall.com/tutorials/css3-media-queries

相關問題