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

----如何通过媒体查询按屏幕大小切换CSS//---- http://

按详细条件排序媒体查询是CSS3的一项功能，允许您根据查看环境（如屏幕大小和分辨率）切换要应用的样式。它是一种规范，通过限制基于传统CSS中的终端类型应用此样式的对象来扩展“媒体类型” 。通过此媒体查询，还可以对其进行精细的修饰，例如根据查看器使用的绘图区域的大小更改要应用的样式。常规条件指定：如下面的HTML源（链接元素）所示， CSS仅适用于粗糙类，如“打印”和“屏幕”不能指定。 media ， “screen”>media ， “打印”>在上述情况下当它显示在屏幕上时， “样式表”屏幕。应用了“css” ，打印时只打印样式表“print” 。将应用CSS 。 CSS3中指定的条件：使用CSS3媒体查询，如根据以下HTML源代码显示（链接元素）中的“显示区域水平宽度中的像素数”应用样式表，并且相同的“即使在屏幕上”可以是详细的条件规范。 screen ， and（max ，宽度：899px）”>screen ， and（min ，宽度：900px）>在上述情况下当浏览器的显示区域宽度为899px或更小时，应用“移动” 。当浏览器的显示区域宽度为900px或更大时，将应用“pc.css” 。当您希望分离PC和移动环境之间应用的样式表时，这非常有用。即使你不在上面的资料中写“图片”部分，这也不是问题。在不符合媒体查询的旧浏览器中使用媒体查询的脚本必须是有效的，除非先添加“screen sum”（屏幕总和）（请参见下文）。在本文中，用“@media ， screen”来描述“和” 。它不仅可以在link元素的media属性中指定，还可以在CSS源中指定。适用条件也可在CSS源中描述如下：. 这样，您就可以在一个CSS源中包含所有样式，因此您不需要为每个目标拆分CSS文件。 @media、screen和（max ，宽度：320px）、、*当显示区域为320px或每小时、、div、sidebar、宽度：100、@media、screen和（min ，宽度：800px）、*当显示区域为800像素或更高时， *、div、sidebar、宽度：240px此外，由于可以同时指定多个条件，也可以描述为“当屏幕的水平宽度为320px或更大， 800px或更小时” 。详情将在后面介绍。可以通过浏览环境轻松设计媒体查询（媒体查询）。通过使用这个媒体查询，很容易设计（响应式Web设计）来匹配用户的浏览环境，而不需要使用复杂的脚本来获取或确定诸如用户代理名称和屏幕大小等信息。