[CSS] 媒体查询

媒体查询(Media Queries),可以根据不同的媒体情况加载相应的样式。
有两种使用方式:

(1)样式表文件
例如:

<link 
    rel="stylesheet" 
    type="text/css" 
    href="styleA.css" 
    media="screen and (min-width: 400px)"
>

<u></u>media属性用来进行媒体查询。

其中,screen表示媒体类型,CSS2.1定义了10种媒体类型。
<u></u>add称为关键字,其他关键字还有notonly
<u></u>(min-width:400px)表示媒体特性,要加载该样式表文件,支持的最小设备宽度为400px。

(2)样式

@media screen and (max-width: 600px) { 
  .class {
    background: #ccc;
  }

  ......
}

表示当屏幕尺寸小于600px时,应用包含的样式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,344评论 0 11
  • 现象:窗口宽度为700px的时候,.test元素变红。窗口宽度为500px的时候,.test元素变绿。 总结:(1...
    何幻阅读 3,777评论 0 0
  • web 根据媒体特性限制样式表的作用域. 例如width, height, color.CSS3中的媒体查询让内容...
    Exap阅读 136评论 0 0
  • 有多少人的时间 在那一盏一盏灯 之前悄悄流逝 有多少人因为那盏灯 而彻夜不眠 辗转反侧
    卓西阅读 299评论 0 0