CSS3媒体查询

定义和使用

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

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

 

一、设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释:

  • width = device-width:宽度等于当前设备的宽度

  • initial-scale:初始的缩放比例(默认设置为1.0)  

  • minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)    

  • maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)   

  • user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 

 

二、加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

 

三、设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:

为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

四、media 属性:

(1)all——用于所有设备 

(2)print —— 用于打印机和打印预览 

(3,常用)screen——用于电脑屏幕,平板电脑,智能手机等。 

(4)speech——应用于屏幕阅读器等发声设备

(5)and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)

(6)(min-width: 400px) 就是媒体特性,其被放置在一对圆括号中

(7) 在 media 中:  min-width (大于), max-width (小于)

 

五、用法

1. 直接在link中判断设备的尺寸,然后引用不同的css文件

/* 当屏幕的宽度大于等于400px的时候,应用 A.css */

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

 

/* 当屏幕的宽度大于600 小于800px时,应用B.css */

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

2. 直接写在 style 标签里或css文件中

/* 当屏幕尺寸小于600px时,应用下面的CSS样式 */

@media screen and (max-width: 600px) { 

  body {

    background: #ccc;

  }

}

3. 前端响应式布局 Bootstrap 屏幕参数

4.  常见的格式

/* 手机, 小于768px */
@media screen and (max-width: 768px) { 
  ...
}

/* 平板, 大于768px, 小于992px */
@media screen and (min-width: 768px) and (max-width: 992px) {
  ...
}

/* 小桌面, 大于992px, 小于1200px */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  ...
}

/* 大桌面(标配), 大于1200px */
@media screen and (min-width: 1200px) {
  ...
}

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页