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. javascript 属性的特性

    /* 属性的特性: 可以通过调用Object.getOwnPropertyDescriptor()可以获得某个对象特定属性的属性描述符, 从函数名字就可以看出, Object.getOwnProper ...

  2. 写自己的WPF样式 - 窗体

    初试WPF样式,感觉还不错.上篇写完了按钮的样式下面写窗体,废话不多说直接上代码: (1)定义一个窗体样式"MyWpfWindow" <Style x:Key="M ...

  3. 自然数e这家伙怎么蹦跶出来的？

    自然数e这家伙怎么蹦跶出来的? 之前看过一篇中文介绍自然数e的blog,引起了我的兴趣 原文是阮一峰大牛(我认为必须很有必要尊敬的称,大牛)嚼烂了吐出来的哈哈,只是我认为还是自己去看原文比較好 感觉非 ...

  4. java图片处理工具类

    直接上代码: package com.zxd.tool; /** * Created by zhang on 14-3-1. * 图片的常用操作类 */ import java.awt.AlphaCo ...

  5. Mui实现退出登录

    document.getElementById("logout").addEventListener("tap",function(){ var btn=[&q ...

  6. codevs 2449 骑士精神 （IDDfs）

    /* 限制步数 写迭代加深 注意剪枝:当先步数+不同的个数-1>当前限制的步数 就cut */ #include<cstdio> #include<cstring> #i ...

  7. ajax提交请求为啥url要用这个函数encodeURI

    参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式例如:ajax提交到后台的,就需要对url进行encodeURI编码,否则,会导致后台出现各种乱码,不加enco ...

  8. 向ASP.NET服务器控件中嵌入CSS资源

    Step1:于[项目解决方案]中右键新建[ASP.NET服务器控件]项目 Step2:于项目中添加[Resources]文件夹,于该文件夹下添加[CSS文件] Step3:单击该CSS文件,并将[属性 ...

  9. MTK Android 默认值修改笔记

    1.设置菜单: 1.1位置信息(Location)默认关闭: 请将 alps\frameworks\base\packages\SettingsProvider\res\values\default. ...

  10. Git简明教程

    http://www.jianshu.com/p/16ad0722e4cc http://www.jianshu.com/p/f7ec8310ccd2