我刚刚问了一个关于居中元素的问题,并给出了我必须做的事情(用另一个元素包裹几个元素只是为了让它们显示类似于 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;
}
为了使网站自动适合屏幕尺寸,我需要更改什么?按照目前的设置方式,我必须在元素本身内指定宽度...
最佳答案
他们可能使用 CSS Media Types和 Media Queries根据呈现的媒体(例如,screen
、handheld
)使用不同的样式表。
有一篇关于 ALA 的精彩文章突出介绍了这些技术:"Responsive Web Design" .
关于css - Apple 的网站 - 它如何针对移动设备自动调整自身大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6961181/