css响应式媒体查询_无需媒体查询的响应式CSS模式

本是古典何须时尚 2022-12-03 09:48 244阅读 0赞

css响应式媒体查询

![A variety of screens with different responsive images][]

Let me start by saying that despite the title, this article is *not* about doing away with media queries or media query bashing in any way. Media queries are incredibly useful and I use them all the time for all sorts of things. However, they don’t solve all our responsive design problems.

首先让我说，尽管标题如此，但本文*并不是*要以任何方式消除媒体查询或媒体查询的抨击。 媒体查询非常有用，我一直将它们用于各种事情。 但是，它们并不能解决我们所有的响应式设计问题。

It’s often desirable to effect changes to an arrangement of elements based on the dimensions of their container, rather than the viewport. To solve this problem, the concept of [element queries][] was born. However, element queries aren’t really a *thing* yet, and Mat Marquis has demonstrated some problems with the concept and reformulated them as [container queries][]. But these aren’t a *thing* yet either, unfortunately.

通常需要根据容器的尺寸而不是视口来更改元素的排列。 为了解决这个问题， [元素查询][element queries]的概念诞生了。 但是，元素查询还不是真正的*事情* ，Mat Marquis已经证明了该概念的一些问题并将其重新表述为[容器查询][container queries] 。 但是不幸的是，这些还不是*一回事* 。

Hopefully they will be one day, but in the meantime, I’ve presented here a few tricks and techniques you can use to address *some* of the problems container queries will one day solve.

希望它们将是一天，但是与此同时，我在这里介绍了一些技巧和技术，您可以使用这些技巧和技术来解决容器查询有一天将解决的*一些*问题。

## 带`flex-wrap` Flexbox **(**Flexbox with `flex-wrap`**)** ##

`Flex-wrap` can solve a multitude of problems when it comes to responding to container dimensions. For example, it’s common to want two elements to appear side-by-side if there’s enough space, but to stack one on top of the other if there isn’t. In the following demo we can see this behavior in action:

当涉及到容器尺寸时， `Flex-wrap`可以解决许多问题。 例如，如果有足够的空间，通常希望两个元素并排出现，而如果没有足够的空间，则将一个元素堆叠在另一个元素之上。 在下面的演示中，我们可以看到这种行为：

See the Pen [Responsive module – flexbox][Responsive module _ flexbox] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[响应模块- Flexbox的][Responsive module _ flexbox]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

No fancy tricks here, just flexbox with `flex-wrap` but it works a treat. Flexbox can be used for many more things than just creating two columns, of course, but I’ve kept things simple for this demo. The essential parts of this technique are simply:

这里没有花哨的技巧，只有带有`flex-wrap` flexbox，但是它可以治疗。 当然，Flexbox不仅可以用于创建两列，还可以用于更多的事情，但是对于此演示，我将事情简化了。 该技术的基本部分很简单：

<div class="container">
      <div class="img">...</div>
      <div class="content">...</div>
    </div>
    
    ...

.container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
    }
    
    .container .content,
    .container .img {
      flex: 1 0 12em;
      /* Change 12em to your breakpoint. */
    }

Understanding `flex-grow`, `flex-shrink` and `flex-basis` is an important part of getting this right; I find this [flexbox tip from Zoe Gillenwater][] really useful in understanding the relationship between these properties.

了解`flex-grow` ， `flex-shrink`和`flex-basis`是实现这一目标的重要部分。 我发现[Zoe Gillenwater的flexbox技巧][flexbox tip from Zoe Gillenwater]对于理解这些属性之间的关系非常有用。

## 第四工厂技术 **(**‘The Fab Four Technique’**)** ##

The use of `width`, `min-width`, `max-width` and `calc` to create a breakpoint-based width-switch — dubbed ‘The Fab Four technique’ — was the brain-child of [Rémi Parmentier][R_mi Parmentier]. Originally created to help with responsive emails, it can easily be used for normal web pages and has really opened up some new possibilities in creating self-adapting modules, as demonstrated by [Thierry][]. For example,

使用的`width` ， `min-width` ， `max-width`和`calc`来创建基于断点宽度开关-被称为“所述的Fab四技术” -是脑-子[雷米帕门蒂尔][R_mi Parmentier] 。 最初创建是为了帮助响应电子邮件，它可以轻松地用于普通网页，并且确实为创建自适应模块开辟了一些新的可能性，如[Thierry所示][Thierry] 。 例如，

{
      min-width: 50%;
      width: calc((25em - 100%) * 1000);
      max-width: 100%;
      /* Change 25em to your breakpoint. */
    }

This works because when `width` is a percentage, it is a percentage of the element’s container width. The `calc` function then compares this value to the desired breakpoint and then generates a really large positive number (if the width is less than the breakpoint), or a really large negative number (if the width is greater than the breakpoint), or zero if there’s an exact match. A large positive width is capped by `max-width` and a large negative or zero width is set to the value of `min-width`.

之所以`width`是因为当`width`为百分比时，它是元素容器宽度的百分比。 然后， `calc`函数将该值与所需的断点进行比较，然后生成一个非常大的正数(如果宽度小于断点)，或者生成一个非常大的负数(如果宽度大于断点)，或者生成零完全匹配。 较大的正宽度由`max-width`限制，并且较大的负或零宽度设置为`min-width`的值。

So, in the example above, we set a breakpoint of `25em`. This resolves to `400px` if the font-size is `16px`. If the container is `400px` or above (in other words *equal-to or greater-than* the breakpoint), the width resolves to 0 or a large negative number:`(400 - 400 = 0) * 1000 = 0` or `(400 - 401 = -1) * 1000 = -1000`

因此，在上面的示例中，我们将断点设置为`25em` 。 如果font-size为`16px`则解析为`400px` 。 如果容器为`400px`或更高(换句话说， *等于或大于*断点)，则宽度解析为0或一个较大的负数： `(400 - 400 = 0) * 1000 = 0`或`(400 - 401 = -1) * 1000 = -1000`

With values like these, `min-width` kicks in so the resultant width of the element in the example above will be `50%`. However, if the container is `399px` or below (in other words *smaller* than the breakpoint), the width resolves to a large positive number:`(400 - 399 = 1) * 1000 = 1000`

使用此类值时， `min-width`起作用，因此上例中元素的结果宽度将为`50%` 。 但是，如果容器为`399px`或以下(换句话说， *小于*断点)，则宽度解析为一个较大的正数： `(400 - 399 = 1) * 1000 = 1000`

In this case `max-width` kicks in and the resultant width is `100%`. The following diagram should help to visualize this process:

在这种情况下， `max-width`开始变化，结果宽度为`100%` 。 下图应有助于可视化此过程：

![Diagram visualizing the Fab Four Technique][]

The next four demos all use this technique in different ways to switch the width of an element in response to the width of its container.

接下来的四个演示都以不同的方式使用此技术来根据元素的容器宽度切换元素的宽度。

## 浮动图片-全宽/部分宽度 **(**Floated Image – Full Width / Partial Width**)** ##

In this demo I’ve used the ‘Fab Four Technique’ combined with `float` to switch an image between full- and half-width depending on the width of the container:

在此演示中，我使用了“ Fab Four Technology”和“ `float` ”相结合，根据容器的宽度在全角和半角之间切换图像：

See the Pen [Responsive module – float][Responsive module _ float] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅笔[响应模块–][Responsive module _ float]由CodePen上的SitePoint( [@SitePoint][SitePoint] ) [浮动][CodePen] 。

Similar to the `flexbox` example above, this technique allows the elements to switch between a stacked arrangement at small widths, and floated/wrapped arrangement if there’s enough space.

类似于上面的`flexbox`示例，此技术允许元素在小宽度的堆叠排列和浮动/包裹排列之间切换(如果有足够的空间)。

## 浮动图片-可见/隐藏 **(**Floated Image – Visible / Hidden**)** ##

Adapted from the previous technique, I inverted the result of the calculation and removed the `min-width` declaration to create an on/off switch. This is useful for hiding decorative elements in smaller containers where they may take up valuable space:

根据以前的技术，我反转了计算结果，并删除了`min-width`声明以创建一个开/关开关。 这对于将装饰元素隐藏在可能会占用宝贵空间的较小容器中很有用：

See the Pen [Responsive module – float / hidden][Responsive module _ float _ hidden] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[响应模块-浮动/隐藏][Responsive module _ float _ hidden]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

And for the sake of clarity:

为了清楚起见：

{
      /* Removed min-width since we want the width to be zero at this point and negative widths are treated as zero */
      /* Inverted the multiplier: */
      width: calc((25em - 100%) * -1000);
      max-width: 100%;
      /* Change 25em to your breakpoint. */
    }

## 文字和图片-叠加/堆叠 **(**Text and Image – Overlaid / Stacked**)** ##

See the Pen [Responsive module – overlaid / stacked][Responsive module _ overlaid _ stacked] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[响应模块-叠加/堆叠][Responsive module _ overlaid _ stacked]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

In a similar vein to the previous techniques, I’ve used an extra `div` to pull the text up over the image, but where the image is too small and would otherwise be obscured by the text, the text snaps underneath instead. This part of the technique is a little complicated, so I’ll attempt to clarify it.

与以前的技术类似，我使用了一个额外的`div`将文本上拉到图像上，但是如果图像太小，否则将被文本遮盖，则文本将在下面捕捉。 该技术的这一部分有点复杂，因此我将尝试对其进行澄清。

.pull {
      /* Pull the text up over the image by this much: */
      margin-bottom: -10em;
    }

Here, the negative margin pulls subsequent content upwards so that it overlays the image. However, we need to turn this off when the container width crosses the breakpoint but since there’s no `min/max-margin` property, we can’t use the ‘Fab Four Technique’ here to achieve this.

在这里，负边距将后续内容向上拉，使其覆盖图像。 但是，我们需要在容器宽度超过断点时将其关闭，但是由于没有`min/max-margin`属性，因此我们无法在此处使用“ Fab Four Technique”来实现这一点。

As luck would have it, though, if padding is given a percentage, it’s a percentage of the container’s width, and `padding-top` and `-bottom` will affect the *height* of an element. With this knowledge we can use `calc` to create a padding-bottom value that switches between zero or ‘really large’ based on the container’s width:

幸运的是，如果给填充指定百分比，那么它就是容器宽度的百分比，并且`padding-top`和`-bottom`将影响元素的*高度* 。 有了这些知识，我们可以使用`calc`创建一个填充底值，该值根据容器的宽度在零或“真正大”之间切换：

`padding-bottom: calc((30em - 100%) * 1000);`

We can’t apply this to the `.pull` div directly as there’s no `min/max-padding` property to restrict these values; the solution is to put the padding switch on a pseudo-element to force the change in height and use `max-height` on the `.pull` element to restrict the height to the same value as the negative margin so that we effectively negate that margin.

我们无法将其直接应用于`.pull` div，因为没有`min/max-padding`属性可以限制这些值； 解决方案是将填充开关置于伪元素上，以强制更改高度，并在`.pull`元素上使用`max-height`将高度限制为与负边距相同的值，以便有效地使该边距无效。

.pull {
      /* Pull the text up over the image by this much: */
      margin-bottom: -10em;
      /* Don't allow this container to be larger than the same amount: */
      max-height: 10em;
      /* and hide any overflow, just to be on the safe side: */
      overflow: hidden;
    }
    
    .pull::before {
      content: "";
      display: block;
      padding-bottom: calc((30em - 100%) * 1000);
      /* Change 30em to your breakpoint */
    }

The overlay gradient effect is achieved by applying an ‘on/off’ switch as described earlier to a pseudo-element to which the background gradient has been applied:

覆盖渐变效果是通过将前面所述的“开/关”开关应用于已应用背景渐变的伪元素来实现的：

.image::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
    
      /* Gradient to make the text more legible: */
      background-image: linear-gradient(to bottom, rgba(0,20,30,0) 0%,rgba(0,20,30,0) 50%,rgba(0,20,30,1) 100%);
    
      /* Extra .5% to prevent bleed due to rounding issues: */
      height: 100.5%;
      /* Toggle gradient overlay at the same breakpoint as the 'pull': */
      width: calc((30em - 100%) * -1000);
      /* Change 30em to your breakpoint */
      max-width: 100%;
    }

## 截断清单 **(**Truncating List**)** ##

The final technique I developed was inspired by a version of the [Priority Plus pattern on CSS tricks][]. Though not as sophisticated as that, this one doesn’t require any JavaScript:

我开发的最终技术灵感来自[CSS技巧上][Priority Plus pattern on CSS tricks]的[Priority Plus模式][Priority Plus pattern on CSS tricks]版本。 尽管还不那么复杂，但是它不需要任何JavaScript：

See the Pen [Truncating List][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [截断][Truncating List]笔。

Again, this uses the ‘The Fab Four technique’, only this time based on the height of the container, rather than the width.

同样，这只是使用“四工厂法”，只是这次基于容器的高度，而不是宽度。

<div class="outer">
      <div class="inner">
        <div class="item">...</div>
        ...
        <div class="control">...</div>
      </div>
    </div>
    ...

.outer {
      height: 2.25em;
      overflow: hidden;
    }
    
    .outer:target {
      height: auto;
    }

The outer container has a fixed height and hides any overflow unless the element is `:target`\-ed.

外部容器的高度固定，除非元素`:target` \-ed，否则隐藏所有溢出。

.inner {
      display: flex;
      flex-wrap: wrap;
    }

The inner container is a flex container with `flex-wrap` turned on, so it will increase in height as the elements wrap, but elements below the first line will be hidden by the `.outer` container’s `overflow:hidden`, creating the truncating effect.

内部容器是一个启用了`flex-wrap`的flex容器，因此当元素包装时，它的高度会增加，但是`.outer`容器的`overflow:hidden`将隐藏第一行以下的元素，从而产生截断效果。

.control {
      height: calc((2.25em - 100%) * -1000);
      max-height: 2.25em;
    }
    
    :target .control--open {
      display: none;
    }
    
    :target .control--close {
      display: block;
    }

The ‘*more/less*‘ controls are only made visible if the height of the container exceeds the breakpoint (which is the same as the height of the main links), and the `:target` state determines which control is visible.

仅当容器的高度超过断点(与主链接的高度相同)时，才显示“ *更多/更少* ”控件，并且`:target`状态确定哪个控件可见。

## 在CSS中智能对齐文本 **(**Aligning Text Smartly in CSS**)** ##

See the Pen [Responsive Text Align][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的Pen [响应式文本][Responsive Text Align]按SitePoint( [@SitePoint][SitePoint] ) [对齐][CodePen] 。

Aligning text centrally or on the left depending on the space available in the container compared to the length of the text is a really useful thing to be able to do. This technique was created by [Vijay Sharma][] makes achieving this very easy.

根据容器中的可用空间(与文本的长度相比)，将文本居中对齐或在左侧对齐是一件非常有用的事情。 该技术由[Vijay Sharma][]创建，使实现此目标非常容易。

## 奖励：Flex-grow 9999 Hack **(**Bonus: Flex-grow 9999 Hack**)** ##

A great trick from Joren Van Hee that fits nicely into this collection is [the flex-grow 9999 hack][].

Joren Van Hee的一个很好的技巧是[flex-grow 9999 hack][the flex-grow 9999 hack] ，非常适合此系列。

## 赞扬：看，没有媒体查询作者：Vasilis van Gemert **(**Praise: Look, No Media Queries by Vasilis van Gemert**)** ##

Vasilis van Gemert’s talk [Look, no media queries][Look_ no media queries] provided me with the impetus to investigate media query-less responsive design, which in turn led me to write this article. His talk is well worth a watch and includes some other ideas which, although really useful, didn’t quite fit into the theme of what I’ve presented here.

Vasilis van Gemert的演讲[外观，没有媒体查询][Look_ no media queries]为我提供了研究缺乏媒体查询的响应式设计的动力，这反过来又促使我写了这篇文章。 他的演讲非常值得一看，其中包含了一些其他想法，尽管它们确实很有用，但并不完全符合我在此介绍的主题。

## 结论 **(**Conclusion**)** ##

There are lots of things that can’t be done without element/container queries. Things like color values, font-size and line-height, borders and box-shadows, margins and paddings – the list is long. Adjusting all of these things in response to the state of a parent container should be possible with element/container queries, but, alas, there doesn’t appear to be any sign of those becoming a reality any time soon. However, I hope that in the meantime some of what I’ve presented here will be of use to you.

没有元素/容器查询，很多事情是无法完成的。 诸如颜色值，字体大小和行高，边框和框阴影，边距和填充之类的东西很长。 可以通过元素/容器查询来调整所有这些内容以响应父容器的状态，但是，可惜的是，似乎没有任何迹象表明它们很快就会成为现实。 但是，我希望与此同时，我在这里介绍的一些内容对您有用。

If you’d like to know what designing with Element Queries *might* be like, [Writing Element Queries Today Using EQCSS][] will help you to get started.

如果您想知道用元素的查询设计*可能*是什么样的， [描画要素查询今天使用EQCSS][Writing Element Queries Today Using EQCSS]将帮助您上手。

If you want to know more about element/container queries here are some useful resources:

如果您想了解有关元素/容器查询的更多信息，这里有一些有用的资源：

*  [EQCSS – A CSS Extension for Element Queries & More][EQCSS _ A CSS Extension for Element Queries _ More]
    
    [EQCSS –用于元素查询CSS扩展及更多][EQCSS _ A CSS Extension for Element Queries _ More]
 *  [Why Element Queries Matter][]
    
    [为什么元素查询很重要][Why Element Queries Matter]
 *  [Container Queries: Once More Unto the Breach][container queries]
    
    [容器查询：再次违反][container queries]
 *  [The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today][The Search For The Holy Grail_ How I Ended Up With Element Queries_ And How You Can Use Them Today]
    
    [寻找圣杯：我如何结束元素查询，以及今天如何使用它们][The Search For The Holy Grail_ How I Ended Up With Element Queries_ And How You Can Use Them Today]
 *  [Use Cases and Requirements for Element Queries Editor’s Draft][Use Cases and Requirements for Element Queries Editor_s Draft]
    
    [元素查询编辑器草稿的用例和要求][Use Cases and Requirements for Element Queries Editor_s Draft]
 *  [Use cases for container queries][]
    
    [容器查询的用例][Use cases for container queries]
 *  [How Style Scoping Works with Element Queries][]
    
    [样式范围界定如何与元素查询一起使用][How Style Scoping Works with Element Queries]

> 翻译自: [https://www.sitepoint.com/responsive-css-patterns-without-media-queries/][https_www.sitepoint.com_responsive-css-patterns-without-media-queries]

css响应式媒体查询

[A variety of screens with different responsive images]: /images/20221123/5c194755ef0d411bb4d75939d9f1c876.png
[element queries]: https://www.sitepoint.com/beyond-media-queries-time-get-elemental/
[container queries]: http://alistapart.com/article/container-queries-once-more-unto-the-breach
[Responsive module _ flexbox]: http://codepen.io/SitePoint/pen/vgQXZG/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[flexbox tip from Zoe Gillenwater]: http://www.creativebloq.com/advice/3-pro-tips-for-using-flexbox
[R_mi Parmentier]: https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.dtpllw1lf
[Thierry]: https://codepen.io/thierry/pen/ZQgEoZ?editors=1100
[Diagram visualizing the Fab Four Technique]: /images/20221123/cef295ca0b8d4c888297eb296f998363.png
[Responsive module _ float]: http://codepen.io/SitePoint/pen/OWaRjg/
[Responsive module _ float _ hidden]: http://codepen.io/SitePoint/pen/VPVKMe/
[Responsive module _ overlaid _ stacked]: http://codepen.io/SitePoint/pen/egQdGb/
[Priority Plus pattern on CSS tricks]: https://css-tricks.com/diy-priority-plus-nav/
[Truncating List]: http://codepen.io/SitePoint/pen/GrwjOr/
[Responsive Text Align]: http://codepen.io/SitePoint/pen/EZOgbB/
[Vijay Sharma]: http://nocode.in/aligning-text-smartly-in-css/
[the flex-grow 9999 hack]: http://joren.co/flex-grow-9999-hack/
[Look_ no media queries]: https://vimeo.com/160593680
[Writing Element Queries Today Using EQCSS]: https://www.sitepoint.com/eqcss-a-javascript-plugin-to-write-element-queries/
[EQCSS _ A CSS Extension for Element Queries _ More]: http://elementqueries.com/
[Why Element Queries Matter]: http://hugogiraudel.com/2014/04/22/why-element-queries-matter
[The Search For The Holy Grail_ How I Ended Up With Element Queries_ And How You Can Use Them Today]: https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-queries-and-how-you-can-use-them-today
[Use Cases and Requirements for Element Queries Editor_s Draft]: https://responsiveimagescg.github.io/cq-usecases
[Use cases for container queries]: https://justmarkup.com/log/2016/02/use-cases-for-container-queries
[How Style Scoping Works with Element Queries]: http://codepen.io/tomhodgins/post/how-style-scoping-works-with-element-queries
[https_www.sitepoint.com_responsive-css-patterns-without-media-queries]: https://www.sitepoint.com/responsive-css-patterns-without-media-queries/