案例一： 

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. win64+anaconda+xgboost(转)

    Windows下安装python版的XGBoost(Anaconda)          XGBoost是近年来很受追捧的机器学习算法,由华盛顿大学的陈天奇提出,在国内外的很多大赛中取得很不错的名次, ...

  2. XML与HTML

    一.什么是HTML 带着疑问走到这里,一句话:HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言. 如果想了解更多请看以下博客: http://blog. ...

  3. zabbix出现中文不能选的情况

    像这里一样,有些选项是选不了的,这个时候我们要做的第一步就是,找到这个配置文件. 如果不知道在哪里的话可以用find命令查找. sudo find / -name locales.inc.php 找到 ...

  4. Linux下tar.gz 安装

    将安装文件拷贝至你的目录中 如果是以root身份登录上的,就将软件拷贝至/root中. cp xxx.tar.gz /root 解压缩包 tar xvzf xxx.tar.gz 切换到安装目录下 cd ...

  5. linux系统分区表修复

    有些时候在系统突然断电或硬盘只读后在看机会出现报错,开机到不了登录界面,而是来到一个提示: Give root password for maintenance(or type Control-d t ...

  6. Windows系统之hosts文件

    对于Hosts文件相信很多Win7的系统用户会比较陌生,其实Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,所以功 ...

  7. TZOJ 4865 统计单词数(模拟字符串)

    描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给定的 ...

  8. 【C基础】之联合体

    1.联合体 联合体(union)与结构体(struct)有一些相似之处.但两者有本质上的不同.在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和.而在联合体中,各成员共享一段内 ...

  9. OC - runtime - 1

  10. Golang之waitgroup用法

    我敲下一堆代码,终于长出了果实,今天是个伟大日子 package main import ( "fmt" "sync" "time" ) / ...