案例一： 

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. Springboot IDEA eclipse 打包

    在开发springboot项目中,我们会进行打包发布项目,springboot推荐以jar包方式发布,相对之下 jar运行的效率比起war项目快很多. 打包切记: 1.查看项目里面有没有其他的main ...

  2. .net的内置对象

    一 . 获取客户端,服务器端信息: Response.Write("客户端信息:"); Response.Write("<br>浏览器类型,版本:" ...

  3. python之列表【list】

    这里介绍下列表的功能 #切片:列表[a:b],从下标为a开始,到下标为(b-1)的元素 # name = [0,1,2,3,4,5,6,7,8,9] # print(name[1:6]) # # 结果 ...

  4. jquery 动态添加的代码不能触发绑定事件

    今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...

  5. redis中multi和pipeline区别以及效率(推荐使用pipeline)

    手册得知 pipeline 只是把多个redis指令一起发出去,redis并没有保证这些指定的执行是原子的:multi相当于一个redis的transaction的,保证整个操作的原子性,避免由于中途 ...

  6. php SESSON共享 (mysql方式)

    为什么要进行session共享? 因为一些大型网站,通常会有很多服务器,每个服务器运行不同的业务模块,并使用二级域名(或是完全不同的域名),而用户系统是统一的,通过登陆名.密码来登陆各模块.用户数据放 ...

  7. Photoshop和Halcon中的极坐标变换

    极坐标想必学过高中数学的人都听过,一般的坐标系中用(x, y)值来描述一个点的位置,而在极坐标系中,则使用到原点的距离ρ和夹角θ来描述该点的位置. 我很早就接触了Photoshop,知道Photosh ...

  8. Linux动态共享库

    Linux操作系统上面的动态共享库大致分为三类:   一.操作系统级别的共享库和基础的系统工具库 libc.so, libz.so, libpthread.so等等,这些系统库会被放在/lib和/us ...

  9. svn回退版本/取消修改

    取消对代码的修改分为两种情况:   第一种情况:改动没有被提交(commit). 这种情况下,使用svn revert就能取消之前的修改. svn revert用法如下: # svn revert [ ...

  10. 向Ubuntu的Dash中添加图标

    首先准备.xpm图标文件,如果程序文件夹中没有,那么可以根据自己喜好到网上下载喜欢的图标,不要太大,然后将其改为.xpm文件(直接改了后缀名就行).然后打开/usr/share/application ...