CSS3: Media媒体查询

星辰大海_enoch

于 2019-09-28 00:04:24 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666580

本文介绍了常见的页面布局方式，包括静态布局、流式布局、自适应布局和响应式布局，并详细解析了媒体查询的使用方法，如苹果官网采用的响应式布局策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见页面布局:

静态布局: 比如58同城，古老的网页

流式布局: 页面大小发生变化，内容不变，但是dom元素也更着变化

自适应布局

响应式布局: 如苹果官网苹果官网

媒体查询包括: 媒体类型和媒体特性。

媒体查询的使用:

link元素中的css媒体查询: 没有执行也引入了css文件(不推荐是使用该方法，link标签会太多，建议写再style样式或者同一的css文件中。)

        <link rel="stylesheet" href="demo.css" media="screen and (max-width: 800px)">

样式表中的css媒体查询: 彩色屏幕最大像素不大于600像素的时候时候执行。

        @media screen and (max-width: 600px) { /* 满足条件返回true执行 */
    .demo{
        background: pink;
        color: deeppink;
    }
}