Question

我刚问了一个关于居中元素的问题，并给出了我必须做的事情（用另一个元素包装几个元素只是为了让它们与Apple的布局类似地显示，并且必须指定宽度以使其居中），他们究竟如何让网站在移动设备上如此出色地工作？有什么我做错了吗？这是我用于我的页面的CSS。

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;
}

为了使网站自动适应屏幕尺寸，我需要更改什么？它当前设置的方式，我必须在元素本身内指定宽度...

Answer 1

他们可能会使用CSS Media Types和Media Queries来使用不同的样式表，具体取决于它所呈现的媒体（例如screen，handheld）。< / p>

关于ALA的一篇很棒的文章突出了这些技巧："Responsive Web Design"。

Apple的网站 - 它如何自动为移动设备自动化？

1 个答案: