CSS媒体查询高度大于宽度，反之亦然（或如何模仿JavaScript） [英] CSS media query height greater than width and visa versa (or how to imitate with JavaScript)

问题描述

因此，目前大多数台式机和笔记本电脑屏幕的宽度大于高度。屏幕是宽而不是高。智能手机通过启用手机的方向来影响内容的呈现方式，已经做得相当酷。

So the majority of desktop and laptop screens nowadays have a width greater than the height. The screen is "wide" not "tall." Smart phones have done something rather cool by enabling the orientation of the phone to influence how the content is presented.

我想通过媒体查询做到这一点，如果一个mac上有一个大监视器的浏览器窗口大小，以便它是非常高（高度大于宽度），他们会看到一个页眉和页脚。但是如果他们全屏或宽（宽度大于高度），他们会看到一个侧边栏在左边，也许也是右边。

I'd like to do this with media queries, so that if someone on a mac with a big monitor has their browser window sized so that it's very "tall" (height is greater than width) they would see a header and footer. But if they went fullscreen or "wide" (width is greater than height) they would see a sidebar on the left and maybe also the right.

充分利用宽屏幕，方向等。如果有人知道如何通过媒体查询或javascript来做到这一点，请告诉我们。

I'm trying to take full advantage of wide screens, and orientations and such. If anyone know how to do this with media queries or javascript, let me know!

推荐答案

现在，但这里是一个例子为别人谁经过。像以前的人说，人们应该花时间阅读这个： http://www.w3.org/TR/ css3-mediaqueries /

I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/

现在，这里是一个答案。您可以将landscape或portrait与@media规则中的宽度和高度一起使用。这假设高度大于宽度，反之亦然。我通常只使用min-width，然后有几个单独的@media规则具体。一个例子是landscape：水平滚动（桌面）和portait：普通垂直（平板电脑/手机）

Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your @media rules. This assumes that height is greater then width and visa versa. I usually only use min-width and then have a few separate @media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portait: regular vertical (tablet/phone )

这些2不会单独做，一些组合。我认为我们可以假设你的侧栏将是屏幕小于600像宽的障碍。

Those 2 wouldn't do it alone though, you'll need some combinations. I think we can asume your side bar would be a hindrance on screens smaller then 600px wide.

/* ==================== *\
    01
\* ==================== */

@media (min-width: 0) { /* =================================== */

   .main-content {
     width: 100%;
     float: left;
   }

   .side-bar {
     width: 100%;
     float: left
   }

} /* ========================================================== */


/* ==================== *\
    02
\* ==================== */

@media (min-width: 60em) and (orientation:landscape) { /* ====== */

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

} /* ========================================================== */

这里是一个jsfiddle - 请注意box-sizing：border-box;用于填充问题。

HERE is a jsfiddle - note that box-sizing: border-box; is used for padding issues.

这篇关于CSS媒体查询高度大于宽度，反之亦然（或如何模仿JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！