CSS媒体选择的作品，但不进行任何更改

这个CSS的工作原理：CSS媒体选择的作品，但不进行任何更改

@media (max-width:1023px) { 
    html { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     width:1024px;  
    } 
    body{ 
     margin: 0; 
     padding: 0; 
     overflow-y:scroll; 
     height: 100%; 
     min-width: 1024px; 
    }  
} 

@media (min-width:1024px) { 
    html { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
    } 
    body{ 
     margin: 0; 
     padding: 0; 
     overflow-y:scroll; 
     height: 100%; 
    } 
}

所以，对于小的分辨率有在浏览器输出min-width: 1024px;选项：但是这不会改变任何东西 - 小尚分辨率浏览器试图将整个文档放在当前分辨率范围内。

什么是1,024像素分辨率宽：

enter image description here

什么是小屏幕：

enter image description here

，这就是为什么我要使用宽度为小分辨率 - 要显示的页面与1024像素的宽度，在这些屏幕上的可见部分将是这个分辨率与滚动左右

来源

2013-06-22 Joe Half Face

你是什么意思：“它有效”？ – PeeHaa

我很困惑......你迫使小屏幕有一个大屏幕布局？ –

我的意思是，浏览器检测到它（我可以在元素检查中看到它），但是，尽管我很伤心，仍然试图将整个文档放在640px的 –

因此，您要说即使您为<body>元素设置了一个最小宽度为1024像素的浏览器视口，但您的<body>元素的渲染宽度并不比浏览器视口宽吗？

奇数。在Chrome 27为我工作：

http://jsfiddle.net/87mMW/

是什么浏览器您使用？ Media queries aren’t supported in IE ≦8, Firefox ≦3, and Safari ≦3.1。

来源

2013-06-22 21:57:47

基于上述意见，你可以完全去除媒体查询，只需使用这样的：

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
body{ 
    margin: 0; 
    padding: 0; 
    overflow-y:scroll; 
    height: 100%; 
    width: 1024px; 
}

为了避免重复自己，虽然，更加清理的版本是这样的：

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
body{ 
    overflow-y:scroll; 
    width: 1024px; 
}

来源

2013-06-22 23:32:26

CSS媒体选择的作品，但不进行任何更改

回答

相关问题