前端之媒体查询入门

• 媒体查询
• • 媒体查询语法
  • 媒体类型
  • • 单位pt
  • 屏幕宽度
  • 朝向 (横放 或 竖放)
• 媒体查询 逻辑
• • 与
  • 或
  • 非
• 断点
• 移动优先的响应式设计

媒体查询

CSS媒体查询提供了一种应用CSS的方法 – 浏览器和设备的环境与指定规则相匹配的时候CSS被应用.

媒体查询语法

<style>
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}
</style>

翻译:

<style>
@media 查询的类型 and (css生效条件){
	生效时的css样式. 
}
</style>

媒体类型

被打印时, 将body大小设定为12pt。
页面载入时，不生效。

<style>
@media print {
    body {
        font-size: 12pt;
    }
}
</style>

菜鸟: CSS 多媒体查询，适配各种设备尺寸

单位pt

pt是字体单位。pt全称为point，中文意思为“点”. 印刷行业用来表示字体的大小, 绝对长度为1/72英寸. word, wps 字体大小.

屏幕宽度

<style>
        @media screen and (max-width:960px) {
            body {
                color: red;
            }
        }
        
        @media screen and (min-width:96px) {
            body {
                color: blue;
            }
        }
</style>

朝向 (横放 或 竖放)

orientation 朝向，有 竖放（portrait mode）和横放（landscape mode）两种模式。
标准的桌面视图是横放朝向的, 浏览器默认是横向的.
对竖放模式的手机或平板电脑上可能不太友好.
对朝向的测试建立一个为竖放设备优化的布局。

<style>
        /* 横放 */
        
        @media (orientation: landscape) {
            body {
                background-color: aqua;
            }
        }
        /* 竖放 */
        
        @media (orientation: portrait) {
            body {
                background-color: aquamarine;
            }
        }
</style>

横放标准是 宽减高大于零
根据如下:


小于零
就是竖放

媒体查询 逻辑

设置多个媒体查询的条件

与

and 连接两个条件 , 同时满足, 才可以是使用css样式

<style>
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}
</style>

或

, 用逗号分开,只要满足一个条件就使用css样式

<style>
@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}
</style>

非

not 在@media 后加not 与后面条件相反的情况下使用css样式

<style>
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}
</style>

网页实例

断点

引入媒体查询的点就叫做断点。

移动优先的响应式设计

可以从桌面或者最宽的视图开始，然后随着视口变得越来越小，加上断点，把物件挪开；你也可以从最小的视图开始，随着视口变得越来越大，增添布局内容。第二种方式被叫做移动优先的响应式设计，

第一步: 正常布局流可阅读
第二步: 媒体查询 @media screen and (min-width: 40rem) 一个宽度, 设置一个布局
第三步: 媒体查询 @media screen and (min-width: 70rem) 一个更大的宽度, 设置一个布局
网页实例