案例一： 

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. Python基础语法题库

    引言: 语法练习包括Python基础语法.数据类型.字符编码和简单文件操作等内容. 正文(参考答案附录在题目下方): 1.Python 里用来告知解释器跳过当前循环中的剩余语句,然后继续进行下一轮循环 ...

  2. Installation failed with message INSTALL_CANCELED_BY_USER.

    Installation failed with message INSTALL_CANCELED_BY_USER. It is possible that this issue is resolve ...

  3. git实用操作21条

    1.建空目录 mkdir e:\gg 2.把该目录变成仓库 git init   //发现当前目录下多了一个.git 3.新建文件readme.txt 4.添加文件到仓库  git add readm ...

  4. Linked dylibs built for GC-only but object files built for retain/release for architecture x86_64

    编译开源Xcode 插件 SCXcodeSwitchExpander 源码地址: https://github.com/stefanceriu/SCXcodeSwitchExpander 编译环境:X ...

  5. 【校招面试 之 剑指offer】第18题 删除链表中的节点

    题目一:在O(1)时间内删除链表节点. 给定单项链表的头指针和一个节点指针,定义一个函数在O(1)时间内删除该节点. 思路:(1)如果要删除的节点不是链表的尾节点,则将被删除节点的内容复制到该节点,然 ...

  6. django的数据库操作回顾

    补充一个filter中大于小于的用法 models.course_info.objects.filter(id__gte=30).delete() _exact 精确等于 like 'aaa' __i ...

  7. eclipse奇怪问题之端口占用记录

    启动程序报端口占用(实际并没有启动占用端口的程序) 打开cmd查找占用端口的进程能查到,但又无法杀掉(命令和任务管理器都杀不掉),用了PCHunter(xuetr)结束进程后还会刷新还会重新出现 重启 ...

  8. 41-json.decoder.JSONDecodeError: Invalid control character at: line 6894 column 12 (char 186418)

    在使用python中将单词本的单词用正则匹配成字典后,以json存储,仪json读入,但是一直报错: 原因是: 正则处理后的数据有的出了点问题,导致一个字典的 有多个相同的键!!!,则肯定会报错啊!! ...

  9. EXPAT(XML解析库)

    一.简介 expat是一个由C语言编写的XML解析库.James Clark创建了这个库,现在是制定XML标准的W3组织的技术leader.现在的版本是2.0.2.0开始就由Clark Cooper领 ...

  10. Codeforces 611C. New Year and Domino 动态规划

    C. New Year and Domino time limit per test 3 seconds memory limit per test 256 megabytes input stand ...