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

<!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. Maven项目的结构分析

    上图为简单的Maven结构,其中用src/main/resources写项目配置文件,src/main/java写项目的java文件,src/test/java写java测试类文件.

  2. ubuntu discuz 该函数需要 PHP 支持 XML。请联系空间商，确定开启了此项功能

    apt-get install php-xml apt-get install php-xml-parser

  3. Quorum算法

    分布式系统中,一般保存多个数据副本,明显可以提高系统可靠性.并且存储这些数据副本的节点,不仅做容灾用,也可以提供服务,作负载均衡. 这里就涉及到一个数据一致性的问题,也就是各副本间要进行同步,来保持最 ...

  4. django，uwsgi， nginx部署项目

    在liunx中环境中 对于nginx来说: 1.先安装nginx sudo apt-get install nginx 2.启动nginx服务 sudo /etc/init.d/nginx resta ...

  5. Readability Assessment for Text Simplification -paper

    https://pdfs.semanticscholar.org/e43a/3c3c032cf3c70875c4193f8f8818531857b2.pdf 1.introduction在Brazil ...

  6. lecture2-word2vec-七月在线nlp

    离散表示: one-hot bag of words -- 词权重 ~不能表示顺序关系   TF-IDF (Term Frequency - Inverse Document Frequency) [ ...

  7. German Collegiate Programming Contest 2013-B：Booking（贪心）

        Booking Pierre is in great trouble today! He is responsible for managing the bookings for the AC ...

  8. linux rpm yum 安装 软件

    rpm 安装: 1.rpm包的了解:  rpm  安装  升级  删除 rpm -ivh  ****.rpm   安装 rpm -Uvh  ****.rpm  升级 rpm -e name    删除 ...

  9. oracle 11g数据库--创建表空间,创建用户，用户授权并指定表空间。

    使用环境:我们安装完数据库后,查看以下服务是否启动 需要建库.实质上我们是建立表空间,从而进行库的还原工作. 根据本例情况,是在下面目录下进行的操作. D:\app\Administrator\ora ...

  10. UVA1455 【Kingdom】

    分析 直线都是\(y=\overline{a.5}\)这种形式,而只查询州和城市的个数,所以很容易想到对\(y\)轴做投影,然后转化为区间修改(加减)和单点查询,可以用线段树维护.至于每个州只会合并不 ...