<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media：device-width,orientation</title>
<style>
div{
width:200px;
height:100px;
align:top center;
}
@media all and (max-device-width:1024px) {
div{
background-color:yellow;/*屏幕宽度小于等于1024px时*/
}
}
@media all and (max-device-width:768px) {
div{
background-color:red;/*屏幕宽度小于等于768px时，会覆盖上一个样式定义中包含的0~768px的部分*/
}
}
@media all and (min-device-width:1024px) {
div{
background-color:blue;/*屏幕宽度大于等于1024px时*/
}
}
@media all and (orientation:landscape) {
div{
color:black;/*横屏：页面可见高度小于页面可见宽度时*/
}
}
@media all and (orientation:portrait) {
div{
color:white;/*竖屏：页面可见高度大于等于页面可见宽度时*/
}
}
</style>
</head>
<body>
<div>页面可见高度<b>小于</b>宽度时为黑字，页面可见高度<b>大于或等于</b>宽度时为白字。device-width指设备的屏幕宽度，不是指页面可见宽度。</div>
<p><b>注意：</b>遇到符合同样条件的media样式定义相同内容时，在优先级别相同的情况下最终样式会根据文档流从上到下选择到写在最后的那个样式。</p>
<p>为了避免出错，处于两个值间范围的样式最好不用覆盖(这里用了覆盖)，而是把最大和最小值都写出来，避免顺序改变时样式出错。</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media：device-width,orientation</title>
<style>
div{
width:200px;
height:100px;
align:top center;
}
@media all and (max-device-width:1024px) {
div{
background-color:yellow;/*屏幕宽度小于等于1024px时*/
}
}
@media all and (max-device-width:768px) {
div{
background-color:red;/*屏幕宽度小于等于768px时，会覆盖上一个样式定义中包含的0~768px的部分*/
}
}
@media all and (min-device-width:1024px) {
div{
background-color:blue;/*屏幕宽度大于等于1024px时*/
}
}
@media all and (orientation:landscape) {
div{
color:black;/*横屏：页面可见高度小于页面可见宽度时*/
}
}
@media all and (orientation:portrait) {
div{
color:white;/*竖屏：页面可见高度大于等于页面可见宽度时*/
}
}
</style>
</head>
<body>
<div>页面可见高度<b>小于</b>宽度时为黑字，页面可见高度<b>大于或等于</b>宽度时为白字。device-width指设备的屏幕宽度，不是指页面可见宽度。</div>
<p><b>注意：</b>遇到符合同样条件的media样式定义相同内容时，在优先级别相同的情况下最终样式会根据文档流从上到下选择到写在最后的那个样式。</p>
<p>为了避免出错，处于两个值间范围的样式最好不用覆盖(这里用了覆盖)，而是把最大和最小值都写出来，避免顺序改变时样式出错。</p>
</body>
</html>
3590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
