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

<!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. codeforce 839A Arya and Bran（水题）

    Bran and his older sister Arya are from the same house. Bran like candies so much, so Arya is going ...

  2. weex--手机调试

    Weex Playground 我的是小米应用市场,没有搜索到,不过这是官方的二维码,我是扫描这个二维码下载的.

  3. makefile 使用 Tricks

    .phony是表示目标是伪目标,并不生成相应的文件..phony标志的文件总是执行的. 1. 短横(-)与@ @(常用在 echo 之前):make 在执行编译打包等命令前会在命令行输出此命令,称之为 ...

  4. ECONOMETRICS CHAPTER2

    ♣回归函数/条件期望函数 Regression Function 前面已说过,回归分析是研究一个因变量对解释变量的依赖关系,将这种关系表示为函数形式就是回归函数,说明因变量的均值是如何随着解释变量的变 ...

  5. numpy unable to find vcvarsall.bat

    出现这种情况,是需要引用vc的编译器,可以安装vs来解决,并且安装numpy前, 设置如下宏 SET VS100COMNTOOLS=%VS110COMNTOOLS% SET VS90COMNTOOLS ...

  6. 如何更改Apache的根目录指向

    更改Apache的默认网站根目录地址方法如下: 0,先找到主目录下的apache文件,然后进行下面操作 1.找到 DocumentRoot “X:/Apache/htdocs” 将“X:/Apache ...

  7. textarea去掉右下三角号

    /*去掉textarea右下角三角符号*/ resize : none; 修改样式直接覆盖就行,会把默认样式覆盖掉.如border,width,height,border-radius

  8. centos安装jdk1.8

    一．安装Java环境 1. 删除系统预装的opensdk或其他sdk 用命令 java -version 验证是否存在sdk 2. 下载Java JDK约定的版本 版本:Java SE Develop ...

  9. PTA——猜数字游戏

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

  10. 并发编程-TPL

    并发编程-TPL 本节导航 基本概念 并发编程 TPL 线程基础 windows为什么要支持线程 线程开销 CPU的发展 使用线程的理由 如何写一个简单Parallel.For循环 数据并行 Para ...