Base Browsers: IE6.0+, Firefox2.0+, Chrome4.0+, Safari6.0+, Opera15.0+

<expression>：指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)

实例

自适应效果

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

body {

    font-family:"Lucida Sans", Verdana, sans-serif;

}

.main img {

    width:100%;

}

h1{

    font-size:1.625em;

}

h2{

    font-size:1.375em;

}

.header {

    padding:1.0121457489878542510121457489879%;

    background-color:#f1f1f1;

    border:1px solid #e9e9e9;

}

.menuitem {

    margin:4.310344827586206896551724137931%;

    margin-left:0;

    margin-top:0;

    padding:4.310344827586206896551724137931%;

    border-bottom:1px solid #e9e9e9;

    cursor:pointer;

}

.main {

    padding:2.0661157024793388429752066115702%;

}

.right {

    padding:4.310344827586206896551724137931%;

    background-color:#CDF0F6;

}

.footer {

    padding:1.0121457489878542510121457489879%;

    text-align:center;

    background-color:#f1f1f1;

    border:1px solid #e9e9e9;

    font-size:0.625em;

}

.gridcontainer {

    width:100%;

}

.gridwrapper {

    overflow:hidden;

}

.gridbox {

    margin-bottom:2.0242914979757085020242914979757%;

    margin-right: 2.0242914979757085020242914979757%;

    float:left;

}

.gridheader {

    width:100%;

}

.gridmenu {

    width:23.481781376518218623481781376518%;

}

.gridmain {

    width:48.987854251012145748987854251012%;

}

.gridright {

    width:23.481781376518218623481781376518%;

    margin-right:0;

}

.gridfooter {

    width:100%;

    margin-bottom:0;

}

@media only screen and (max-width: 500px) {

    .gridmenu {

        width:100%;

    }

    .menuitem {

        margin:1.0121457489878542510121457489879%;

        padding:1.0121457489878542510121457489879%;

    }

    .gridmain {

        width:100%;

    }

    .main {

        padding:1.0121457489878542510121457489879%;

    }

    .gridright {

        width:100%;

    }

    .right {

        padding:1.0121457489878542510121457489879%;

    }

    .gridbox {

        margin-right:0;

        float:left;

    }

}

</style>

</head>

<body>

<div class="gridcontainer">

    <div class="gridwrapper">

        <div class="gridbox gridheader">

            <div class="header">

                <h1>The Pulpit Rock</h1>

            </div>

        </div>

        <div class="gridbox gridmenu">

            <div class="menuitem">The Drive</div>

            <div class="menuitem">The Walk</div>

            <div class="menuitem">The Return</div>

            <div class="menuitem">The End</div>

        </div>

        <div class="gridbox gridmain">

            <div class="main">

<h1>The Walk</h1>

<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>

<img src="pulpitrock.jpg" alt="Pulpit rock" width="" height="">

            </div>

        </div>

        <div class="gridbox gridright">

            <div class="right">

<h2>What?</h2>

<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>

<h2>Where?</h2>

<p>The Pulpit Rock is in Norway</p>

<h2>Price?</h2>

<p>The walk is free!</p>

            </div>

        </div>

        <div class="gridbox gridfooter">

            <div class="footer">

<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>

            </div>

        </div>

    </div>

</div>

</body>

</html>

正常效果

宽度小于500的效果

css属性之@media的更多相关文章

  1. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  2. Web 前端开发者必知CSS 属性

    1.  圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现. “border-ra ...

  3. css中的media

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  4. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  5. 【css】CSS3 Media Queries 详解【转】

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  6. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  7. HTML CSS 属性大全

    CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...

  8. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

  9. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

随机推荐

  1. 二、Linux文件系统之内存管理

    虚拟内存  32位:4G 64位:2^64 内存管理: 进程管理 自动分配和管理 支持模块化程序设计 保护和访问控制 长期存储 虚拟内存  <---MMU-->物理内存

  2. A+B问题（java）

    import java.util.Scanner; public class Main { public static void main ( String args[] ) { Scanner in ...

  3. Creating Lists and Cards 创建列表和卡片

    To create complex lists and cards with material design styles in your apps, you can use the Recycler ...

  4. java集合框架03

    Collections工具类的使用 public class News implements Comparable { private int id; //新闻编号 private String ti ...

  5. spring源码分析构建

    命令如下: ant ant install-maven ant jar package E:\download\spring-framework-3.1.3.RELEASE\build-spring- ...

  6. linux操作笔记

    [fedora可以ping通但是isReachAble返回false的原因] fedora18+ 防火墙设置原因,导致tcp端口不通,返回no route to host错误. 关闭防火墙命令: sy ...

  7. 重新认识Swift中的可选型(Swift2.1)

    //: Playground - noun: a place where people can play import UIKit /* Swift中nil代表是是另外一种类型, 而不像OC那样, 任 ...

  8. mvvm框架正式名字确定

    经过长时间的选名,今天终于把名字定下来了,ddrjs  data drive render,其实框架的核心还是 数据驱动渲染,其实现在市面上的大部分mvvm框架如:angular.vue.avalon ...

  9. 手动安装svn到eclipse

    今天为了装个svn搞得我焦头烂额~ 1.下载site-1.10.10.zip.(http://download.csdn.net/download/codepython/9082533) 2.在ecl ...

  10. 单点登录CAS使用记（一）：前期准备以及为CAS-Server配置SSL协议

    知识点: SSO:单点登录(Single Sign On),是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. CAS:耶 ...