这里简单说明一下@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. Mybatis基于SqlSession实现CRUD

    之前我们讲的基于XML还是接口注解配置都是使用接口实现CRUD,本文我们将要讲解通过splsession来实现CRUD,这种方法比较灵活. 基本配置 <!-- spring和MyBatis完美整 ...

  2. ShellListView

    過濾ShellListView顯示的檔案 有關這方面的元件你可以在Win3.中找到相關元件 你可以使用四個元件搭配應該就可以你所需要的功能 DriveComboBox1.FilterComboBox1 ...

  3. Delphi直接读取XmL

    有时,只需要用XML作一些小的应用,比如只是简单地保存日志或者一些配置,这时我们只需要直接读写XML就好,效率第一. Delphi盒子有一个直接读写XML文件 (例子和代码),其核心函数为下面两个函数 ...

  4. 个人笔记 - Word2013 论文格式调整

    1.如何实现每章奇偶页页眉不同 2.参考文献自动编号.交叉引用及在正文中自动更新 <1>在要插入引用上标的地方点击“插入”——>“交叉引用” <2>设置引用类型为“编号项 ...

  5. 建立logback.xml 配合MDC 实现追踪

    <?xml version="1.0" encoding="UTF-8"?> <configuration debug="false ...

  6. 9、继续matlab数值分析

    1.matlab拉格朗日插值 function yi=Lagrange(x,y,xi) %x为向量,全部的插值节点 %y为向量,插值节点处的函数值 %xi为标量或向量,被估计函数的自变量: %yi为x ...

  7. SQLSERVER 时间日期函数，查询今天日期、昨天、一个星期、半年前的数据

    今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0昨天的所有数据:select * from 表名 where D ...

  8. 泛微weaver_oa filebrowser.jsp 任意目录遍历

    url//document/imp/filebrowser.jsp?dir=/etc/

  9. shell编程：变量替换

    定义变量:$ var_1="I love you, Do you love me" 输出变量:$ echo $var_1 打印结果:I love you, Do you love ...

  10. Springboot的Mybatis逆向工程

    1.pom.xml添加mybatis和逆向插件依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> ...