最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器。

那么什么是media媒体查询器呢?

Media媒体查询器是CSS3新增的一个可以检测打开网站的终端的屏幕分辨率的技术。

Media媒体查询器的使用方法大致如下:

1.设置一个meta标签如:

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

相关参数解释:

  device-width:定义输出设备的屏幕可见宽度。  

  device-height:定义输出设备的屏幕可见高度。

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

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

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

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

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

2.加载兼容文件js

为什么加载兼容文件js呢?

因为IE8以上的内核是不兼容html5以及CSS3 media的。所以需要加载两个兼容文件使得我们的代码能够实现出来。

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

也可以自行下载html5hiv.js和respond,js只需要在使用的时候修改对应的script里面的src路径就ok。

3.把IE的渲染方式调节到最高。闲在大多数的IE都是9以上的版本,这个版本的IE文档模式不是最新的,或者说很多的小伙伴没有注意这一点,所以可以通过下面的代码实现保持IE的文档模式保持最新的版本:

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

第二种方法:

1 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

安装一个Google chrome frame这个Google chrome插件。这样可以使得所有的浏览器都能够使用Webkit引擎及V8引擎进行排版及运算,如果没有安装这个插件的话上面的代码是会使得浏览器一最高的文档模式展现效果。

CSS3 media的标准写法:

例如:当页面小于960px的时候执行它下面的CSS代码。

1 @media screen and (max-width: 960px){
3 body{
5 background: #000;
7 }
9 }

这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体。

CSS2 Media用法

其实并不是只有CSS3才支持Media的用法,早在CSS2开始就已经支持Media,具体用法,就是在HTML页面的head标签中插入如下的一段代码:

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

想知道现在的移动设备是不是纵向放置的显示屏,可以这样写:

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

第一段的代码也用CSS2来实现,让它一样可以让页面宽度小于960的执行指定的样式文件:

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

但是这个方法会增加http的访问次数。所以用CSS3把所有的CSS写到一起才是最ok的。

Ok,现在我们回到CSS3的media用法上面,前面讲了用CSS3的写屏幕宽度小于960px的尺寸的写法,现在我们来写一下等于960px的方法:

1 @media screen and (max-width-device:960px){
2
3 Body{
4
5 Background:blue;
6
7 }
8
9 }

宽度大于960px的写法:

1 @media screen and(min-width:960px){
2
3 Body{
4
5 Background:red;
6
7 }
8
9 }

前面就是常用的几种写法了,接下来对CSS3 media做一个总结:

width:浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

orientation:检测设备目前处于横向还是纵向状态。

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例。

color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)

color-index:检查设备颜色索引表中的颜色,他的值不能是负数。

monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)

resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。

grid:检测输出的设备是网格的还是位图设备。

最后,附上一个趣味Demo结尾:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>CSS3 media Test</title>
6 <meta name="author" content="LostWeapon" />
7 <style>
8 *{
9 text-align: center;
10 font-size: 20px;
11 }
12 div{
13 font-size: 14px;
14 }
15 @media screen and (min-resolution: 75.5dpcm) {
16 .normal{display:none;}
17 }
18 @media screen and (min-resolution: 28.3dpcm) and (max-resolution: 75.4dpcm) {
19 .retina{display:none;}
20 }
21 </style>
22 </head>
23 <body>
24 <p class="retina">视网膜屏</br>哎呦 不错哦,小伙子有前途!</p>
25 <p class="normal">普通屏</br>还不快去努力学习挣钱换电脑!</br><strong>看什么看,说的就是你!</strong></p>
26 </body>
27 <footer>
28 <div>
29 Copyright &copy;2017 墨雨溪风
30 </div>
31 </footer>
32 </html>

CSS3 media媒体查询器的使用方法的更多相关文章

  1. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  2. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  3. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  4. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  5. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。(转)

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

  6. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  7. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  8. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  9. CSS3 之 Media(媒体查询器)

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

随机推荐

  1. 批处理+7zip解压用纯数字加密的压缩包zip

    @echo off set path=c:\Program Files\7-Zip; for /L %%i in (0,1,100000) do ( call :myfunc %%i ) goto : ...

  2. CSS - input 只显示下边框

      CSS 样式 :   border:none;   border-bottom: 1px solid #000

  3. 2 —— js语法 —— 对象和方法的声明 。变量提升。闭包

    一,声明对象 var obj1 = {}; var obj2 = {name:'kk',age:18,fun:function{          // name,age,fun为对象的属性,只是属性 ...

  4. 73.Python中ORM聚合函数详解:Count

    Count:用来求某个数据的个数. 在以下所有的示例中所采用的模型为: from django.db import models # 定义作者模型 class Author(models.Model) ...

  5. 五、JavaScript之点击按钮调用相关JavaScript函数

    一.代码如下 二.执行之后 三.点击按钮之后,内容被改变

  6. spark任务日志配置

    样例代码: public class SparkTest { private static Logger logger = Logger.getLogger(SparkTest.class); pub ...

  7. servlet 之 GenericServlet抽象类详解

    GenericSerlvet抽象类源码如下: package javax.servlet; import java.io.IOException; import java.util.Enumerati ...

  8. List列表删除值为指定字段

    需要处理一个场景,当值为某一个固定值或者为空的时候,删除列表中的这个值. ;i<list.size();i++){ if(list.get(i).equals("del")) ...

  9. k8s CI/CD--Jenkinsfile例子

    试用k8s内部jenkins,并且配置好podtemplate pipeline{ agent any stages{   stage('get the code'){      steps{    ...

  10. springboot-jar

    预览 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...