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

问题描述

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

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. How to do this with media queries or javascript?

推荐答案

我相信你现在已经拥有它，但这里有一个例子对于经过的其他人。就像上一个人说的那样，人们应该花时间阅读这篇文章： 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/

现在，这是一个答案。您可以在@media规则中将横向或纵向与宽度和高度结合使用。这假设高度大于宽度，反之亦然。我通常只使用min-width，然后为那些具有一些单独的@media规则。一个例子是横向：水平滚动（桌面）和肖像：常规垂直（平板电脑/手机）

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 than the width and vice 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 portrait: regular vertical (tablet/phone )

那些2不会单独做，但你需要一些组合。我想我们可以假设你的侧边栏会在小于600px宽的屏幕上成为障碍。

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

/* 01 */
@media (min-width: 0) {
   /* this is the same as not using a media query... */
   .main-content {
     width: 100%;
     float: left;
   }

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

}


/* 2 */
@media (min-width: 600px) and (orientation:landscape) {

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

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

}

HERE is jsfiddle - 请注意框大小：边框：用于填充问题。

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

我想大多数人现在都会使用flexbox ： https://jsfiddle.net/sheriffderek/egxcgyyd/

I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/

.parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) and (orientation:landscape) {
  .parent {
    flex-direction: row;
  }
  .child-1 {
    min-width: 260px; /* or flex-basis: xx - try them both */
  }
  .child-2 {
    flex-basis: 100%; /* "if at all possible... please try to be this size..." */
  }
}

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