这里简单说明一下@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. [转]C# CancellationTokenSource 终止线程

    我们在多线程中通常使用一个bool IsExit类似的代码来控制是否线程的运行与终止,其实使用CancellationTokenSource来进行控制更为好用,下面我们将介绍CancellationT ...

  2. UNP学习 多播

    一.概述 单播地址标识单个接口,广播地址标识子网上的所有接口,多播地址标识一组接口. 单播和广播是编址方案的两个极端,多播的目的就在于提供一种折衷的方案. 二.多播地址 我们必须区分IPv4多播地址和 ...

  3. Network基础(三)：网线的制作、交换机基本命令模式、交换机命令行基本配置、交换机的密码设置

    一.网线的制作 目标: 在常见的计算机网络中,网线主要用来连接计算机与交换机(或宽带路由器).交换机与交换机.交换机与路由器,以及需要连网的其他各种设备.网线的制作与测试是作为网络管理员的一个入门技能 ...

  4. dos添加文件夹属性！

    attrib 显示所有文件的属性:参数:+r或-r [文件名] 设置文件属性是否为只读 +h或-h [文件名] 设置文件属性是否隐含 +s或-s [文件名] 设置文件属性是否为系统文件 +a或-a [ ...

  5. 《ArcGIS Runtime SDK for .NET开发笔记》--在线编辑

    介绍 ArcGIS可以发布具有编辑功能的Feature Service.利用Feature Service我们可以实现对数据的在线编辑. 数据制作参考: https://server.arcgis.c ...

  6. PHP 工程师技能图谱

    # PHP 工程师技能图谱## 基础知识 - HTTP - HEADER - REQUEST - RESPONSE - GET/POST/PUT/DELETE/PATCH/CONNECT/OPTION ...

  7. appium自动化测试- 元素操作

    本文转自:https://www.cnblogs.com/sinder2018/articles/9699801.html 一.滑动屏幕 1.appium - 滑动屏幕 滑动接口: swipe(起始X ...

  8. JS-MiniUI：百科

    ylbtech-JS-MiniUI:百科 MINIUI是一款优秀的JS前端web框架,提供丰富.强大控件库,能快速开发企业级Web应用软件.该软件以美观精致的界面和快速的页面响应速度获得用户的好评.是 ...

  9. vue消息提示Message

    https://www.iviewui.com/components/message this.$Message.info(config) this.$Message.success(config) ...

  10. spss-数据清洗-处理重复数据

    spss-数据清洗-处理重复数据 数据导入之后就需要对数据进行清洗.数据清洗主要是对多余重复的数据筛选清除,将缺失的数据补充完整,将错误的数据纠正或者删除.接下来操作如何将重复数据处理操作. 步骤一: ...