如何通过媒体查询按屏幕大小切换CSS( 三 )_按详细条件排序媒体查询是CSS,3的一项

示例媒体查询作为使用媒体查询切换样式的示例，我们准备了一个示例页面，根据屏幕大小更改框的背景色。请使用浏览器检查显示屏。例如，使用媒体查询的页面，如果更改浏览器窗口的宽度以更改显示区域的宽度，则框的背景色也将更改，如右图所示。如何根据媒体查询中的屏幕大小应用指定的CSS？例如，假设您准备了四个CSS文件，如下所示。 style1.css在所有环境中读取，读取样式2 。如果屏幕宽度等于或大于640像素，则显示样式3 。如果屏幕宽度等于或大于960像素，如果style4.css屏幕宽度等于或大于1200像素，我想加载。

我想指定按屏幕宽度读取四个样式表文件的条件。如果屏幕宽度小于640px ，则只有一个样式1 。已应用CSS文件。如果屏幕宽度为1200像素或更高，轻应用style1.css ， style4.css所有CSS文件。在这种情况下，写入link元素以读取CSS文件，如下所示style ， 1 。 css\"rel\"stylesheet\"type\"stylesheet\"type\"textcss\">style2.css\" rel\"stylesheet\" type+textcsscsscsscssmedia\"sidebar52and(min width: 640px)\">style 3.css\"rel rel rel rel rel rel\"stylesheet\"textstylesheet\"type\"\"text\"css\" media\"screenand (min widt) H:1200px)>在上述示例中，在以下条件下应用style1.css、style4.css 。 css1适用于查看区域宽度为640px或更大时的所有情况， css2适用于查看区域宽度为960px或更大时， css3适用于查看区域宽度为1200px或更大时， css4适用于此情况，查看者使用的浏览器的“显示区域宽度”与“应用程序CSS”如下。如果宽度小于639px ，则仅应用style1.css 。如果宽度为640959px ，则应用style1.css和STYLE2.css 。如果水平宽度为960到1199像素，则应用style1.css中的三个，样式2 。 CSS ， style3.css 。如果水平宽度为1200像素或更高，则应用style1.css中的四个，样式2 。 CSS ， style3.css ， style4.css 。通过这种方式，可以根据查看环境（如显示区域的水平宽度）增加或减少要应用的样式。如果要在CSS源中进行分支：以便在不拆分CSS文件的情况下在单个CSS源中进行分支，如上面的示例所示，可以编写以下内容。 ** applies to all situations*divdivsidebar{width: 100** when the width of the viewing area is 640px or larger*@mediascreen and (minmin* when the width of the viewing area is 1200px or Higher applica操作* ， @media ， screen和（min ，，宽度：1200像素）， div ， sidebar ，宽度：300像素，例如，这里div元素的宽度根据观察者的屏幕大小而变化。这样，分支也可以在ACSS源中描述。 . 移动首先写入上述写入，首先通过准备“样式1” 。 css“适用于所有情况，添加更多样式，如果”样式2 。 CSS式样4 。 CSS ， “已经成为一种形状。在这方面窄屏的设计非常简单。随着屏幕的扩大，我认为设计是复杂的。这是一种方便的写作方式。首先离开应用程序，在移动环境中，当屏幕被广泛称为“通过重写与宽屏对应的指定表单来移动第一个书面表单”时，我经常使用这种书写样式。不支持媒体查询的旧版本浏览器（例如IE8或更低版本）只适用于任何情况下的“样式1” 。 css英寸，无论屏幕大小。即使使用较旧的浏览器，移动样式也只能很容易地应用，因此您可以放心使用它。 *在上述来源中，打印时仅应用和打印style1.css 。因为style2.css仅限于屏幕显示，例如“screen ， and” 。如何根据媒体查询的屏幕大小切换CSS？有时，您希望为每个查看环境完全分离样式表，并分别应用它们。例如，如果您有三个CSS文件，可以在下面看到。如果浏览器的屏幕宽度小于599px ，则只有电话。应用了CSS ，平板电脑。 CSS仅在600到959像素和desktop之间应用。 css仅在屏幕宽度超过960 px时应用。