美文网首页
CSS3之多媒体查询

CSS3之多媒体查询

作者: 球丁丁 | 来源:发表于2020-04-12 21:38 被阅读0次

1.用途

  • 使用 @media 查询,可以针对不同的媒体类型定义不同的样式
  • @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的
  • 注意:重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

2.用法

@media screen and (min-width: 480px) {
    body {
        background-color: yellow;
    }
}
/*屏幕宽度为480px以上时body的背景色为黄色*/
(1)写在style标签或CSS文件中
(2)直接在link中判断设备的尺寸,然后引用不同的CSS文件
/* 当屏幕的宽度大于等于400px的时候,应用 A.css */
<link rel="stylesheet" type="text/css" 
href="A.css" media="screen and (min-width: 400px)">

3.常用媒体类型

  • all:用于所有多媒体类型设备
  • print:用于打印机
  • screen:用于电脑屏幕,平板,智能手机等
  • speech:用于屏幕阅读器

3.常用特性

  • width:定义输出设备中的页面可见区域宽度
  • height:定义输出设备中的页面可见区域高度
  • max-width:定义输出设备中的页面最大可见区域宽度
  • max-height:定义输出设备中的页面最大可见区域高度
  • max-device-width:定义输出设备的屏幕最大可见宽度
  • max-device-height:定义输出设备的屏幕可见的最大高度
  • orientation:检测设备目前处于横向(值为landscape)还是纵向(值为portrait)状态
  • aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
  • device-aspect-ratio:检测设备的宽度和高度的比例
  • color:检测颜色的位数(例如:min-color: 32就会检测设备是否拥有32位颜色)

相关文章

  • CSS 响应设计-媒体查询

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

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

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

  • CSS3之多媒体查询

    1.用途 使用 @media 查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置...

  • CSS3 媒体查询

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

  • CSS3响应式开发

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

  • Media queries

    CSS3提供了多种媒体查询的方式 通过dpi

  • IE8 兼容性处理

    Doctype Meta 媒体查询支持 Respond.js CSS3 支持 CSS3 PIE,它支持的特性有这些...

  • 媒体查询

    媒体查询是CSS3添加的新功能。在移动端适配开发中发挥着强大的作用。接下介绍一下媒体查询的用法。 使用 媒体查询有...

  • CSS3中的媒体查询

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

  • CSS3多媒体查询

    CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示...

网友评论

      本文标题:CSS3之多媒体查询

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