这里简单说明一下@media 查询。

详细说明文档：http://www.runoob.com/cssref/css3-pr-mediaquery.html

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

屏幕缩小：

屏幕放大：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>响应式</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

                font-size:60px;

                color: white;

            }

            #conter{

                width: 100%;

                clear: both;

                overflow: hidden;

            }

            header{

                padding-top: 10px;

                padding-bottom: 70px;

            }

            #one{

                width: 75%;

                height: 35px;

                background: black;

                float: left;

            }

            #one1{

                width: 20%;

                height: 35px;

                background: black;

                float: right;

            }

            #two{

                background: lightseagreen;

                width: 100%;

                height:120px;

                clear: both;

                text-align: center;

                line-height: 120px;

            }

            #lm{

                width: 100%;

            }

              [class*=g1] {

                      float:left;

                     margin-right: 1%;

                    width: 24%;

                    height: 200px;

                    margin-top: 30px;

                    line-height: 200px;

                    text-align: center;

                    background: sandybrown;

                }

                #yi{

                    overflow: auto;

                    margin-right: -1%;

                }

               @media only screen and (min-width: 480px) and (max-width: 980px) {

                       header{

                           width: 100%;

                       }

               }

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

                [class^=g1] {

                    float: none;

                    width: 100%;

                }

            }

              @media only screen and (min-width: 768px) and (max-width: 1024px) {

                       [class^=g1] {

                            width: 49%;

                    }

               }

        </style>

    </head>

    <body>

        <div id="conter">

            <header>

                <div id="one">

                </div>

                <div id="one1">

                </div>

            </header>

            <div id="two">

                1

            </div>

            <div id="lm">

                <div id="yi">

                    <div class="g1" style="background:lightgreen;">2</div>

                    <div class="g1" style="background: lightcoral;">3</div>

                    <div class="g1" style="background: deepskyblue">4</div>

                    <div class="g1" style="background: pink;">5</div>

                </div>

            </div>

        </div>

    </body>

</html>

不同大小分辨率就不同效果，bootstrap框架里面的CSS里面样式，里面也用到了@media查询。感觉CSS3好强大。

菜鸟一枚，欢迎大神指点，只有不断深入学习，才能够收获

CSS3 @media 查询（制作响应式布局）的更多相关文章

  1. CSS3 媒体查询@media 查询（响应式布局）

    例:如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background ...

  2. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  3. CSS3 Media Queries实现响应式布局

    概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...

  4. CSS3---媒体查询与响应式布局

    1. 值 设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种 ...

  5. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  6. Flex、Grid、媒体查询实现响应式布局

    本篇文章主要讲述使用Flex布局.Grid布局以及媒体查询三种方式来实现响应式布局. 文章涉及代码在线coding地址 效果图: 文字描述: 屏幕大小不同,展示列数不同,1-5号按照屏幕大小可展示2到 ...

  7. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

  8. 怎样使用CSS3媒体查询(Media Queries)制作响应式网站

    自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...

  9. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

随机推荐

  1. Windows下Maven安装 + eclipse集成

    一.什么是maven? Maven是一个项目管理工具,能方便的帮我们下载jar包,告别传统手动导包的方式. 二.maven仓库 maven中有中央仓库,本地仓库,私服三个概念 1.中央仓库是maven ...

  2. security 页面测试

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  3. 开放融合 | “引擎级”深度对接！POLARDB与SuperMap联合构建首个云原生时空平台

    阿里巴巴新一代自研云数据库POLARDB与超图软件SuperMap GIS实现 “引擎级”深度对接,构建了自治.弹性.高可用的云原生时空数据管理平台联合解决方案,推出了业界首个“云原生数据库+云原生G ...

  4. shell--grep命令+正则表达式+基本语法

    什么是正则 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则. 在linux中,通配符是由shell解释的,而正则表达式则 ...

  5. Qt事件学习

    一.创建Qt gui应用对应的源码: 点击(此处)折叠或打开 //mylineedit.h #ifndef MYLINEEDIT_H #define MYLINEEDIT_H #include < ...

  6. paper 141：some paper with ComputerCV、MachineLearning[转]

    copy from:http://blog.csdn.net/zouxy09/article/details/8550952 一.特征提取Feature Extraction: ·         S ...

  7. layer icon对应图标

    layer icon对应图标 信息框(msg.alert.open.confirm) icon:0 icon:1 icon:2 icon:3 icon:4 icon:5 icon:6 icon:16 ...

  8. react — script引入 和 脚手架使用的区别

    1.React 入门实例教程 :http://www.ruanyifeng.com/blog/2015/03/react.html ( 阮一峰的博客)  或   https://segmentfaul ...

  9. 升级到Xcode 5.1和iOS 7遇到的各种问题及解决办法汇总：

    <iOS 企业证书部署无效的问题>:http://t.cn/8s7ILWZ <clipsToBounds 属性默认值变了>:http://weibo.com/165881473 ...

  10. [STemWin教程入门篇]第二期：emWin5.xx的详细移植步骤

    转自:http://bbs.armfly.com/read.php?tid=1545 重要说明:(0)由于这个移植教程是去年过年的时候做的,用的是5.16,这就不再做个5.20的移植了,方法是一样的. ...