重新设计固定大小的网站

Question

这真的很有趣，我在这个网站上有我的问题和回复 media queries and to adapt the ready made site 现在它们似乎只针对“宽度”，屏幕高度怎么样，宽度宽，高度短？

我想将我的topmenu + body + footer放到800px的高度，并尝试了

@media all and (min-height: 768px) and (max-height: 959px) {
div#container{
  position:relative;
  margin:0 auto; 
  height:70%;
  min-height:70%;}

div#content {
  min-height: 350px;
}
}                  

但是没用。

Answer 1

您可以使用以下方法检测肖像或风景：

/* Portrait */
@media screen and (orientation:portrait) {

}

或

/* Landscape */
@media screen and (orientation:landscape) {

}

或者，如果你想更精确：

@media screen and (device-aspect-ratio: 16/9) {

}

或更常用的：

@media all and (max-height: 1000px) and (min-height: 700px) {

}