美文网首页
Css - 媒体查询

Css - 媒体查询

作者: ElricTang | 来源:发表于2019-10-21 10:44 被阅读0次

一. 媒体查询作用?

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。

二. 在哪里使用媒体查询?

  • link标签内
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
  • Css样式表内
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

三. 基本语法

@media 媒体类型 and (媒体特性){
     样式
}

四. 逻辑操作符

操作符 描述
and 合并多条
not 取非
only 防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式
(相当于or 或运算

五. 媒体类型与媒体特性

常用媒体类型 描述
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备
常用媒体特性 描述
max-width / max-height 最大宽高,当前设备小于该值时生效
min-width / min-height 最小宽高,当前设备大于该值时生效
min-resolution / max-resolution / resolution 分辨率
aspect-ratio / max-aspect-ratio / min-aspect-ratio 可见区域宽高比
device-aspect-ratio / min-device-aspect-ratio / max-device-aspect-ratio 设备宽高比
device-height / min-device-height / max-device-height 设备高度
device-width / min-device-width / max-device-width 设备宽度
orientation 方向,判断设备处于横屏还是竖屏
monochrome / min-monochrome / max-monochrome 主要用于判断是否为黑白屏
grid 判断输出设备是网格设备还是位图设备
color / min-color / max-color 判断设备输出颜色数
color-index / min-color-index / max-color-index 指定了输出设备中颜色查询表中的条目数量

六. 例子

  • 根据宽度调整样式
        <style>
            @media screen and (min-width:1000px) and (max-width:2000px) {
                body{
                    background-color: green;
                }
            }
            @media screen and (min-width:100px) and (max-width:1000px) {
                body{
                    background-color: red;
                }
            }
        </style>
  • 根据横屏和竖屏调整样式
        <style>
            /* 竖屏 */
            @media screen and (orientation:portrait){
                body{
                    background-color: green;
                }
            }
            /* 横屏 */
            @media screen and (orientation:landscape){
                body{
                    background-color: red;
                }
            }
        </style>

相关文章

  • CSS 响应设计-媒体查询

    1、响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询...

  • CSS3响应式开发

    CSS3多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3...

  • 浅谈CSS3 响应式布局--Media Queries

    CSS3 Media Queries , CSS3媒体查询。使用 @media 查询,你可以针对不同的媒体类型定义...

  • CSS3 媒体查询

    1、CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,C...

  • 13、媒体查询

    媒体查询一定要放在初始设置的css样式底下,否则会被后面设置的css样式覆盖掉媒体查询所设置的样式,那么媒体查询就...

  • CSS3中的媒体查询

    一、为什么需要媒体查询 CSS3的媒体查询模块就是为了针对设备特性(width、height等)设置特定的css样...

  • 自适应页面的实现方式

    CSS3 媒体查询 media媒体查询技术的原理:通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。常用匹...

  • CSS-移动端页面(响应式)

    CSS-移动端页面(响应式) 媒体查询

  • CSS3 媒体查询

    能够让网站针对不同的浏览器和设备呈现不同显示效果 引入媒体查询 媒体查询写在CSS样式代码的最后,CSS是层叠样式...

  • 常见IE8兼容性问题及解决

    1、css3媒体查询 IE8不支持媒体查询 解决:respond.js,在页面中所有css文件的引用位置之后引用R...

网友评论

      本文标题:Css - 媒体查询

      本文链接:https://www.haomeiwen.com/subject/vwczmctx.html