你对媒体查询的理解?What's your understanding of media queries ?

你对媒体查询的理解?


How to over-ride an @media css for a material-ui react component ...

简述概念

媒体查询由一个可选的媒体类型和零个多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。

媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身,非常适合web网页应对不同型号的设备而做出对应的响应适配。

如何使用?

媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个多个表达式,这些表达式描述了媒体特征,最终会被解析为truefalse

如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true.那么媒体查询内的样式将会生效。

What's your understanding of media queries ?


Introduction

The media query consists of an optional media type and zero or more expressions that limit the range of stylesheet with media function. Such as width, height and color.

The media query is added from css3, it allows the presentation of content is tailored to output devices of a special range without changing the content itself.

It's very suitable for web pages to respond to the different models of devices and make corresponding response adaptations.

How to use ?

The media query contains an optional media type, under the conditions of the CSS3 specification, it contains zero or more expressions that describe the characteristics of the media and will eventually be parsed as true or false.

If the media type specified in the media query has matched the device type used to display the document, and the value of all expressions is true, and then the result of the media query is true. Then the style in the media query will take effect.

阅读 62

推荐阅读