欢迎,感谢你能来...

找到回家的路:
首页 > 前端分享 > CSS3 Media Queries 实现响应式设计
前端分享

CSS3 Media Queries 实现响应式设计

作者:Fanda 发布日期:2016-05-25 围观人数:332人

简介

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览 […]

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

一、页面中引入媒体类型方法也有多种

1、link方法引入

<link rel="stylesheet" media="screen and (max-width: 600px)" href="sytle1.css" />

在屏幕最大是600px的时候加载”sytle1.css”

2、@import 方式引用,这种方式的引用,要在style中,写法如下:

<style type="text/css" media="screen">
    @import url("css/style.css");
</style>

或者:

<style type="text/css" media="screen and (max-width: 600px)">
    @import url("css/style.css");
</style>

3、第三种方法,也是我很喜欢用的,也就是下面的这种方法:

@media screen and (max-width: 600px) {
    选择器 {
        属性:属性值;
    }
}

二、Media Queries的具体使用方式

1、最大宽度Max Width

面表示的是:当屏幕小于或等于600px时,将采用style2.css样式来渲染Web页面。

<link rel="stylesheet" media="screen and (max-width:600px)" href="style2.css" type="text/css" />

2、最小宽度Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

@media screen and (min-width: 900px) {
    .class {
          background: #666;
    }
}

3、多个Media Queries使用

你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

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

4、设备屏幕的输出宽度Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

@media screen and (max-device-width: 480px) {
  .class {
      background: #000;
  }
}

5、iPad

在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说下面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

6、关键字(not、only)

not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。如下:

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。

其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。如下:

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="a.css" type="text/css" />

7、其他

在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外还有使用逗号(,)被用来表示并列或者表示或,如下:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

(完)

Tags:

转载 云中不知处博客欢迎分享,转载请说明文章出处“ 来源云中不知处博客 http://www.saymiss.com/archives/135 “。
很赞哦!( 0)

上一篇:没有了,已经是最后文章

下一篇:

( 0 )个小伙伴在吐槽

访客评论


站点统计

  • 更新时间:2020-05-06 07:26
  • 文章总数:32
  • 评论总数:38
  • 标签总数:24
  • 运行时间: 511
我的微信
  • 网站赞助:阿里云、腾讯云、百度云、奇虎360、网易云音乐、音悦台、京东商城,哦以上这些都没有。
  • 网站制作:页面设计:Fanda;前端开发:Fanda;后台功能:Fanda;主题开发:Fanda;技术支持:Fanda。我就是天才...
免责声明
  • 1、本站个人博客模板,均为Fanda本人设计,可供个人学习和使用,未经许可不得用于任何商业目的。
  • 2、本站部分文章来自网络,请您放心,所有转载文章内容皆保留来源链接,如本站有著作权属于你的文章内容,而本站并未放上链接或有其他原因侵权,请E-mail: fzh2812@163.com,我会在48小时内删除相关内容,敬请谅解!
碎言碎语
  • 三生有幸遇见你,纵使悲凉也是情

    2020-05-07
  • 忍一时风平浪静,退一步越想越气

    2020-03-21
  • 最近996

    2019-11-09
  • 最近有点忙,996啊

    2019-07-29
  • 端午3天我就没下过楼,出过门

    2019-06-09
  • 今天不小心,谈成了一笔小生意

    2019-05-26
  • 今天为公司推荐一个java后台

    2019-05-24

©2019 云中不知处 Powered by WordPress 文章归档 免责声明 网站地图 百度统计