CSS-响应式布局Responsive Layout 原创邦

CSS-响应式布局Responsive Layout

因为有了Media Query媒介查询，所有才有响应式布局。

The Media Queries Level 3 specification became a Candidate Recommendation in 2009
三级规范出现在2009年，至此以后才开始再浏览器上实现。

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

@media screen and ()

CSS中的断点是什么意思？
css breakpoint： The points at which a media query is introduced, and the layout changed, are known as breakpoints. 有个media query而且layout被改变的点称为断点。

media

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.
Notes:

In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
Browsers not supporting CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

阅读量: 520
发布于: 2021-08-09
修改于: 2021-08-09