这里简单说明一下@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. Linux下github的使用

    在linux下搭建git环境 1.创建Github账号,https://github.com 2.Linux创建SSH密钥: ssh-keygen ##一直默认就可以了 3.将公钥加入到Github账 ...

  2. js控制ios端的input/textarea元素失去焦点时隐藏键盘

    同事在测试产品时发现这样一个:“某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去” 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测 ...

  3. djanjo中url路由匹配规则是啥意思

    一,django路由匹配规则的本质是通过正则表达式对用户的url进行匹配. 1,r 是正则表达式中防止转义的符号,例如在python/n代表换行,加上r就不换行了. 2,$ 正则表达式中表示以什么什么 ...

  4. 为什么要用getBaseContext()方法代替this？（转）

    问:this 常常引用当前的 context.但是有些时候,必须使用getBaseContext()来代替this.就是说使用this会引发错误. 如下面的例子: Spinner spinner = ...

  5. 并口、串口、COM口区别

          并行接口,简称并口.并口采用的是25针D形接头.所谓“并行”,是指8位数据同时通过并行线进行传送,这样数据传送速度大大提高,但并行传送的线路长度受到限制,因为长度增加,干扰就会增加,数据也 ...

  6. 【转】理解JMX之介绍和简单使用

    原文链接:https://blog.csdn.net/lmy86263/article/details/71037316 近期在项目上需要添加一些功能,想把一个开源工程整合进来,虽说是整合,但是觉得跟 ...

  7. 文件上传&&验证文件格式

    $(function(){ $(".layui-progress").hide(); $("[data-upload-file]").each(function ...

  8. vue input框type=number 保留两位小数自定义组件

    第一步:自定义组件MyNumberInput.vue<template> <input class="numberInput" type="number ...

  9. Django框架（二十八）—— Django缓存机制

    目录 Django缓存机制 一.什么是缓存 二.Django的6中缓存方式及配置(只需要改配置文件) 1.开发调试缓存(此模式为开发调试使用,实际上不执行任何操作) 2.内存缓存(将缓存内容保存至内存 ...

  10. grafana初体验

    1.centos版下载安装 wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-5.0.4-1.x86_6 ...