2011-08-05 35 views
0

我剛纔問了一個關於居中元素的問題,並給出了我需要做的事情(用另一個元素包裝幾個元素,以使它們顯示類似於Apple的佈局並且必須指定寬度以居中),他們究竟如何讓這個網站在移動設備上很好地運行?有什麼我做錯了嗎?這是我用於我的頁面的CSS。Apple的網站 - 它如何爲移動設備自動自動化?

body 
{ 
font-size: 80%; 
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
color: #000000; 
background-color: #E4E0E0;/*;*/ 
/*background-attachment:fixed; used to fix a background image so only text scrolls*/ 
-moz-user-select: -moz-none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-o-user-select: none; 
user-select: none; 
} 

.wrapper 
{ 
margin:auto; 
width:950px; 
} 
.homediv 
{ 
background-color:#F7F7F7; 
border:1px solid #FFFFFF; 
-webkit-border-radius:4px; 
-moz-border-radius:4px; 
-o-border-radius:4px; 
border-radius:4px; 
/* width must be defined in the actual element */ 
-webkit-box-shadow: 0px 0px 8px #888888; 
-moz-box-shadow: 0px 0px 8px #888888; 
box-shadow: 0px 0px 8px #888888; 
text-align:center; 
padding:4px; 
} 

.homediv:hover 
{ 
background-color:#FFFFFF; 
cursor:pointer; 
} 

.homediv img 
{ 
-webkit-border-radius:4px; 
-moz-border-radius:4px; 
-o-border-radius:4px; 
border-radius:4px; 
} 

爲了使網站自動適合屏幕尺寸,我需要更改什麼?它目前設置的方式,我必須元素本身中指定的寬度......

回答

2

他們可能使用CSS Media TypesMedia Queries取決於它被上呈現的媒體上使用不同的樣式表(一個或多個)(例如,screenhandheld)。

有一篇關於ALA的優秀文章,其中突出展示了這些技術的特點:"Responsive Web Design"