能根据宽 高 屏幕等一些标签的变化来应用不同的样式叫响应式，如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @media (min-width: 800px) {

            .c1{

                background: blue;

                height:30px;

            }

        }

        @media (min-width: 1000px) {

            .c1{

                background: red;

                height:38px;

            }

        }

    </style>

</head>

<body>

    <div class="c1"></div>

</body>

</html>

　　

@media 响应式布局的更多相关文章

  1. @media响应式布局

    @media可以根据屏幕尺寸调节布局 @media screen and (min-width:100px) and (max-width:200px){ div { color:red; } } 在 ...

  2. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  3. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  4. CSS3学习笔记--media query 响应式布局

    语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...

  5. css3 @media 实现响应式布局

    使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...

  6. CSS3 响应式布局： @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  7. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

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

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

  9. 六、使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...

随机推荐

  1. HDU 3130 17多校7 Kolakoski（思维简单）

    Problem Description This is Kolakosiki sequence: 1,2,2,1,1,2,1,2,2,1,2,2,1,1,2,1,1,2,2,1……. This seq ...

  2. Semaphore计数信号量

    ExecutorService exec = Executors.newCachedThreadPool(); final Semaphore semp = new Semaphore(5); for ...

  3. 使用U盘安装Ubuntu系统

    -----------------------note by shanql-------------------------- 注:在windows下可用EasyBCD安装引导文件来引导Ubuntu( ...

  4. TEST mathjax

    这里是第一个公式 $ F = ma^2 $ \[ \text{Reinforcement Learning} \doteq \pi_* \\ \quad \updownarrow \\ \pi_* \ ...

  5. Ajax的简单介绍与使用

    1.什么是Ajax? Ajax(Asynchronous JavaScript and XML),简单说就是不需要刷新当前页面而实现javaScript和和后台服务器交换数据以更新网页中的部分内容. ...

  6. DG增量恢复

    本篇文档: 讲述DG环境出现GAP归档缝隙,且主库的该归档日志被删除的情况下,快速恢复DG的连通性 流程讲述: >明确主库增量备份起点 scn 查询备库控制文件current scn ,及v$d ...

  7. quartz定时任务及时间设置

    quartz 定时任务时间设置1.这些星号由左到右按顺序代表 :     *    *     *     *    *     *   *                               ...

  8. 20155219实验四 Android开发基础设计实验报告

    20155219实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello World!+学号的小程序 实验步 ...

  9. PTA——猜数字游戏

    PTA 7-24 猜数字游戏 #include <stdio.h> int main() { int num, times; scanf("%d %d", &n ...

  10. php基础-7

    php json数据的读取和转换 将数组转化为json <?php $arr = array('h'=>"hello", "w"=>" ...