css响应式媒体查询
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.
通常需要根据容器的尺寸而不是视口来更改元素的排列。 为了解决这个问题， 元素查询的概念诞生了。 但是，元素查询还不是真正的事情 ，Mat Marquis已经证明了该概念的一些问题并将其重新表述为容器查询 。 但是不幸的是，这些还不是一回事 。
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 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 by SitePoint (@SitePoint) on CodePen.
见笔响应模块- Flexbox的由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技巧对于理解这些属性之间的关系非常有用。
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. 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四技术” -是脑-子雷米帕门蒂尔 。 最初创建是为了帮助响应电子邮件，它可以轻松地用于普通网页，并且确实为创建自适应模块开辟了一些新的可能性，如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% 。 下图应有助于可视化此过程：
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.
接下来的四个演示都以不同的方式使用此技术来根据元素的容器宽度切换元素的宽度。
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 by SitePoint (@SitePoint) on CodePen.
请参阅笔响应模块–由CodePen上的SitePoint( @SitePoint ) 浮动 。
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示例，此技术允许元素在小宽度的堆叠排列和浮动/包裹排列之间切换(如果有足够的空间)。
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 by SitePoint (@SitePoint) on CodePen.
见笔响应模块-浮动/隐藏由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. */ }See the Pen Responsive module – overlaid / stacked by SitePoint (@SitePoint) on CodePen.
见笔响应模块-叠加/堆叠由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);
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%; }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模式版本。 尽管还不那么复杂，但是它不需要任何JavaScript：
See the Pen Truncating List by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint ) 截断笔。
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状态确定哪个控件可见。
See the Pen Responsive Text Align by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的Pen 响应式文本按SitePoint( @SitePoint ) 对齐 。
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创建，使实现此目标非常容易。
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 ，非常适合此系列。
Vasilis van Gemert’s talk 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的演讲外观，没有媒体查询为我提供了研究缺乏媒体查询的响应式设计的动力，这反过来又促使我写了这篇文章。 他的演讲非常值得一看，其中包含了一些其他想法，尽管它们确实很有用，但并不完全符合我在此介绍的主题。
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将帮助您上手。
If you want to know more about element/container queries here are some useful resources:
如果您想了解有关元素/容器查询的更多信息，这里有一些有用的资源：
EQCSS – A CSS Extension for Element Queries & More
EQCSS –用于元素查询CSS扩展及更多
Why Element Queries Matter
为什么元素查询很重要
Container Queries: Once More Unto the Breach
容器查询：再次违反
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 for container queries
容器查询的用例
How Style Scoping Works with Element Queries
样式范围界定如何与元素查询一起使用
翻译自: https://www.sitepoint.com/responsive-css-patterns-without-media-queries/
css响应式媒体查询
相关资源：jdk-8u281-windows-x64.exe