css自媒体查询

准备工作1：设置Meta标签

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

  1. <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，因为我们不希望用户放大缩小页面） 

准备工作2：加载兼容文件JS

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

  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]-->

准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

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

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

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

不过我最近又发现了一个更给力的写法：

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

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

以上内容摘自http://blog.csdn.net/yuzhongkai/article/details/51041937

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background: red
        }
        @media screen and  (min-width:600px) and  (max-width:1200px){
           body{
            background: greenyellow
           } 
        }
        @media screen and  (max-width:600px){
           body{
            background: rgb(47, 102, 255)
           } 
        }
        /* 页面宽度大于1200背景红色 1200-600绿色  小于600蓝色 */
    </style>
</head>
<body>   
</body>
</html>

常用的自媒体查询样式

 特性名 值 应用场景
 width
 min-width
 max-width		  显示区域的宽度（对打印机而言是打印表面）  改变布局以适应非常窄（如手机）或非常宽的显示器。
 height
 min-height
 max-height		  显示区域的高度  改变布局以适应非常长或非常短的显示器
 device-width
 min-device-width
 max-device-width		  当前计算机或设备屏幕的宽度
（或打印输出时纸面的宽度）		  根据不同设备（如手机）调整布局
 device-height
 min-device-height
 max-device-height		  屏幕或纸面的高度  根据不同设备（如手机）调整布局
 orientation  landscape（横向）或portrait（纵向）  根据设备的朝向调整布局
 device-aspect-ratio
 min-device-aspect-ratio
 max-device-aspect-ratio		  显示区域的宽高比（1/1是正方形）  根据窗口形状调整样式（问题可能比较复杂）
 color
 min-color
 max-color		  屏幕颜色的位深
（1位表示黑白，目前主流显示器都是24位）		  检查是否支持彩色输出（比如是不是黑白打印），
 或者支持的颜色数量
样式表用法
 
index.html
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="1.css"">
    <link rel="stylesheet" href="2.css" media="(max-width:800px)">
</head>
<body>  
    <div>
        <ul>
            <li>1是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>2是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>3是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>4是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>5是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>6是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>7是大哥，哈哈哈哈哈哈哈哈哈！</li>
            <li>8是大哥，哈哈哈哈哈哈哈哈哈！</li>
        </ul>
    </div>   
</body>
</html>

 1.css

body{
    margin: 0;
    width: 100%;
}
div{
    text-align: center;
    margin: auto
}
ul{
   display: flex;
   list-style: none;
   justify-content: center;
   flex-wrap:nowrap
}
li{
  line-height: 30px;
  background: red;
  width: 300px;
  margin: 20px;
  font-size: 30px
}

 

2.css

body{
    margin: 0;
    width: 100%;
}
div{
    text-align: center;
    margin: auto
}
ul{
   display: flex;
   list-style: none;
   justify-content: center;
   flex-wrap:wrap
}
li{
  line-height: 30px;
  background: rgb(25, 0, 255);
  width: 300px;
  margin: 20px;
  font-size: 10px
}

 

 

posted @ 2017-11-18 11:28  爱编程的douyaer  阅读(342)  评论(0)  编辑  收藏  举报
Fork me on MaYun