这里简单说明一下@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. JSP自定义方法标签

    1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...

  2. QT文件和目录

    一.文件操作 QFile和QFileInfo: #include <QCoreApplication> #include <QFileInfo> #include <QS ...

  3. [CSP模拟测试43、44]题解

    状态极差的两场.感觉现在自己的思维方式很是有问题. (但愿今天考试开始的一刻我不会看到H I J) A 考场上打了最短路+贪心,水了60. 然而正解其实比那30分贪心好想多了. 进行n次乘法后的结果一 ...

  4. #include <utility>

    #include <utility>这个头文件是什么用法 utility头文件定义了一个pair类型,是标准库的一部分,其原型为:template<class _Ty1, class ...

  5. HTML-参考手册: HTML 字符集

    ylbtech-HTML-参考手册: HTML 字符集 1.返回顶部 1. HTML 字符集 HTML 字符集 如需正确地显示 HTML 页面,浏览器必须知道使用何种字符集. 万维网早期使用的字符集是 ...

  6. cs224d 作业 problem set3 (一) 实现Recursive Nerual Net Work 递归神经网络

    1.Recursive Nerual Networks能够更好地体现每个词与词之间语法上的联系这里我们选取的损失函数仍然是交叉熵函数 2.整个网络的结构如下图所示: 每个参数的更新时的梯队值如何计算, ...

  7. cs224d 作业 problem set1 (二) 简单的情感分析

    使用在上一篇博客中训练好的wordvector 在这一节进行情感分析. 因为在上一节中得到的是一个词就是一个向量 所以一句话便是一个矩阵,矩阵的每一列表示一个词向量 情感分析的前提是已知一句话是 (超 ...

  8. 【转】开源框架是如何通过JMX来做监控的(一) - JMX简介和Standard MBean

    原文链接:https://www.cnblogs.com/trust-freedom/p/6842332.html#autoid-0-0-0 相信很多做Java开发的同学都使用过JDK自带的 jcon ...

  9. ubuntu+VS code+launch.json+task.json

    1.ubuntu->vs code . 通过官方PPA安装Ubuntu make sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make s ...

  10. C/s模式&&B/S模式

    C/s模式:是客户端/服务器(Client/Server)模式,主要指的是传统的桌面级的应用程序.比如我们经常用的信息管理系统. C/S 客户端/服务器 例如QQ,网络游戏,需要下载客户端才能访问服务 ...