当前位置:   article > 正文

前端之媒体查询入门_@media screen两个条件

@media screen两个条件

媒体查询

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

媒体查询语法

<style>
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5

翻译:

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

媒体类型

在这里插入图片描述
在这里插入图片描述
被打印时, 将body大小设定为12pt。
页面载入时,不生效。

<style>
@media print {
    body {
        font-size: 12pt;
    }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

菜鸟: 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这里插入图片描述
在这里插入图片描述

朝向 (横放 或 竖放)

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

<style>
        /* 横放 */
        
        @media (orientation: landscape) {
            body {
                background-color: aqua;
            }
        }
        /* 竖放 */
        
        @media (orientation: portrait) {
            body {
                background-color: aquamarine;
            }
        }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

横放标准是 宽减高大于零
根据如下:
在这里插入图片描述
在这里插入图片描述
小于零
就是竖放
在这里插入图片描述

媒体查询 逻辑

设置多个媒体查询的条件

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

<style>
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

<style>
@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

<style>
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

网页实例

断点

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

移动优先的响应式设计

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

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

下一节: 前端之我的响应式布局实践

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/335235
推荐阅读
相关标签
  

闽ICP备14008679号