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. JVM调优之jstack找出最耗cpu的线程并定位代码

    jstack可以定位到线程堆栈,根据堆栈信息我们可以定位到具体代码,所以它在JVM性能调优中使用得非常多.下面我们来一个实例找出某个Java进程中最耗费CPU的Java线程并定位堆栈信息,用到的命令有 ...

  2. Android 适配

    给定字体大小适配时应按照12sp,14sp,18sp,22sp 这几种字体的大小设置,以避免字体大小混乱12sp以上大小,14sp 18sp 22sp 字体首选大小,不要使用奇数.小数,否则会造成精度 ...

  3. js截取字符串区分汉字字母代码

    js截取字符串并且区分汉字字母,一个汉字辨别为两个字节. function substr(str, len) { if (!str || !len) { return ''; } // 预期计数:中文 ...

  4. Android面试，IntentService的原理及使用

    在Android开发中,我们或许会碰到这么一种业务需求,一项任务分成几个子任务,子任务按顺序先后执行,子任务全部执行完后,这项任务才算成功.那么,利用几个子线程顺序执行是可以达到这个目的的,但是每个线 ...

  5. NYOJ 214 最长上升子序列nlogn

    普通的思路是O(n2)的复杂度,这个题的数据量太大,超时,这时候就得用nlogn的复杂度的算法来做,这个算法的主要思想是只保存有效的序列,即最大递增子序列,然后最后得到数组的长度就是最大子序列.比如序 ...

  6. 属性动画 LayoutTransition AnimatorInflater Keyframe 新特性

    LayoutTransition设置动画 使用LayoutTransition可为布局的容器设置动画,当容器中的视图层次发生变化时产生相应的过渡的动画效果 过渡的类型一共有四种: LayoutTran ...

  7. css04使用外部样式

    1.创建一个新的html页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  8. POP动画引擎中Layer与CALayer的一点区别

    POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲 ...

  9. Php 常用类

    图表库下面的类库可以让你很简单就能创建复杂的图表和图片.当然,它们需要GD库的支持.pChart - 一个可以创建统计图的库.Libchart - 这也是一个简单的统计图库.JpGraph - 一个面 ...

  10. XML Schema （2）

    定义元素 <!-- 1.定义元素book --> <element name="book"></element> <!-- 2.定义元素包 ...