案例一： 

1 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

         <meta name="viewport" content="width=device-width" />

         <title>test</title>

         <style type="text/css">

             @media(max-width:320px){/*让屏幕宽度最大为320px的设备使用该css*/

                 div#wrapper{

                     width:320px;height:50px;background-color:green;

                     color:silver;

                 }

             }

             @media(min-width:360px) and (max-width:400px){/*让屏幕宽度从360px到400px的设备使用该css*/

                 div#wrapper{

                     width:100%;height:100px;background-color:red;

                     color:white;

                 }

             }

         </style>

     </head>

     <body>

         <h1>Media Queries</h1>

         <div id="wrapper">

             <h2>wrapper</h2>

         </div>

     </body>

 </html>

案例二：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <meta name="viewport" content="width=device-width" />

        <title>test</title>

        <style type="text/css">

            @media(max-width:320px){

                div#wrapper{

                    width:320px;height:50px;background-color:green;

                    color:silver;

                }

            }

            @media(min-width:321px) and (max-width:400px){

                div#wrapper{

                    width:100%;height:100px;background-color:red;

                    color:white;

                }

            }

        </style>

    </head>

    <body>

        <h1>Media Queries</h1>

        <div id="wrapper">

            <h2>wrapper</h2>

        </div>

    </body>

</html>

Media Queries简单案例一的更多相关文章

  1. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  2. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  3. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  4. Media Queries 详解

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:  <link href="css/reset.css" rel ...

  5. Media Queries详解

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:  <link href="css/reset.css" rel ...

  6. 基于 CSS3 Media Queries 的 HTML5 应用

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  7. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  8. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  9. 使用media Queries实现一个响应式的菜单

    Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...

随机推荐

  1. SOA （面向服务的架构）

    面向服务的体系结构,是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台.操作系统和编程语 ...

  2. sql：查询课程号'0312091006'成绩排名第5到第10之间的学生学号

    select top 6 sno from (select top 10 sno,mark from student_Coursewhere ccno='0312091006' order by ma ...

  3. httpclient4例子

    参考:http://hc.apache.org/httpclient-3.x/tutorial.html import org.apache.http.HttpEntity; import org.a ...

  4. 第五章 二叉树（b）树的表示

  5. unity3d-ngui UIScrollView 滚动方向与滚轮相反

    生成一个滚动面板之后发现滚轮向上滚,界面向下:滚轮向下界面向上.在编辑窗口里发现这个选项 本来是-2,修改成正数就可以了. http://ju.outofmemory.cn/entry/146754

  6. JAVA list集合两种去重方法

    结果: 转载地址:http://geek.csdn.net/news/detail/127940

  7. Spring框架的核心功能之AOP概述

    1. 什么是AOP的技术? * 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程 * AOP是一种编程范式,隶属于软工范畴,指导开发者如何组织程序结构 ...

  8. MSVCR90D.dll

    http://stackoverflow.com/questions/218747/msvcr90d-dll-not-found-in-debug-mode-with-visual-c-2008 I ...

  9. Vue.js 生命周期的应用

    生命周期示意图 值得注意的几个钩子函数 activated 类型:Function 详细: keep-alive 组件激活时调用. 该钩子在服务器端渲染期间不被调用. 参考: 构建组件 - keep- ...

  10. 服务器的日志一直报Packet for query is too large (7632997 > 4194304). You can change this value on the server by setting the max_allowed_packet' variable.的解决方法

    服务器的日志一直报Packet for query is too large (7632997 > 4194304). You can change this value on the serv ...