有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css3多媒体查询写法

代码编程 cat 11个月前 (11-01) 90次浏览 已收录 0个评论 扫描二维码

CSS3 媒体查询:

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特

定的样式,从而实现更丰富的界面。

media query(多媒体查询)是对media type的一种增强,是CSS 3的重要内容之一

多媒体查询由【多种媒体】组成,可以包含一个或多个【表达式】,根据条件是否成立文档会在匹配的

设备上显示指定样式效果

【在不改变页面结构的情况下,为不同的设备类型或媒体特性,定制显示效果】

语法

样式表内引入媒体查询

语法:

@media 媒体类型 and (媒体特性表达式){
       //css代码
}

媒体类型(media type):

all 所有设备;

screen 用于电脑屏幕,平板电脑,智能手机等;

———————以上较为常用———————

print 用于打印机和打印预览;

speech 应用于屏幕阅读器等发声设备

设备特性(media feature):

width、height视口宽度、高度;(可以配合min,max前缀)

device-width、device-heigh设备宽度、高度(可以配合min,max前缀)

min-最小值 大于等于指定值

max-最大值 小于等于指定值

orientation屏幕朝向

横向 landscape

竖向 portrait

在PC端当窗口的高度值大于等于宽度时该特性值为portrait否则为landscape

关键字(操作符):

and (与、和),用于合并媒体类型或多个媒体特性

@media screen and (min-width:600px) and (max-width:1000px){ 
      .box {
          column-count:3; 
} 
}

not: not 非,不是,用于排除掉某些特定的设备

@media not/only 媒体类型 and (媒体特性表达式) {

}

only: 仅仅、只有,用来指定某种特别的媒体类型

例子:
        @media screen and (min-width :1000px) {
            .box {
                column-count: 4;
                color: aqua;
            }
        }

        @media screen and (min-width :600px) and (max-width :1000px){
            .box1 {
                column-count: 3;
                color: blue;
            }
        }

        @media screen and (max-width :600px){
            .box2 {
                column-count: 3;
                color: chartreuse;
            }
        }

媒体查询横竖屏:

        /* 横屏 */
        @media screen and (orientation:landscape){
            .box {
                column-count: 4;
                color: chartreuse;
            }
        }
        /* 竖屏 */
        @media screen and (orientation:portrait){
            .box {
                column-count: 2;
                color: chocolate;
            }
        }

使用link标签的media属性进行媒体查询

作用:针对不同的媒体类型 或特性 引入指定 的 样式表

语法:

    <link rel="stylesheet" media="媒体类型 and (媒体特性表达式)" href="mystylesheet.css">
    <link rel="stylesheet" href="#.css"> 推荐

例:

    <link rel="stylesheet" media="媒体类型 and (媒体特性表达式)" href="mystylesheet.css">
    <link rel="stylesheet" href="#.css" media="screen and (min- width:1000px)"> 
    <link rel="stylesheet" href="#.css" media="screen and (min-width:600px) and (max-width:1000px)"> 
    <link rel="stylesheet" href="#.css" media="screen and (max- width:600px)">
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址