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

<!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. [BUG]数据库日期格式, 到页面是毫秒值

    springboot 配置文件

  2. PAT 乙级 1056. 组合数的和(15)

    给定N个非0的个位数字,用其中任意2个数字都可以组合成1个2位的数字.要求所有可能组合出来的2位数字的和.例如给定2.5.8,则可以组合出:25.28.52.58.82.85,它们的和为330. 输入 ...

  3. OpenID

    OpenId是一个以用户为中心的数字身份识别框架,它具有开放.分散.自由等特性.OpenId的创建是基于这样一个概念:我们可以通过URI(或者URL网址)来识别一个网站.同样,我们也可以通过这样的方式 ...

  4. python 实现图的深度优先和广度优先搜索

    在介绍 python 实现图的深度优先和广度优先搜索前,我们先来了解下什么是"图". 1 一些定义 顶点 顶点(也称为"节点")是图的基本部分.它可以有一个名称 ...

  5. SEGMENTATION FAULT IN LINUX 原因与避免

    https://www.cnblogs.com/no7dw/archive/2013/02/20/2918372.html

  6. SQLAlchemy中表结构的一对一

    1.先导入相对应的库 from flask import Flask from flask_sqlalchemy import SQLAlchemy import pymysql pymysql.in ...

  7. 20155208徐子涵 2016-2017-2 《Java程序设计》第7周学习总结

    20155208徐子涵 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1 认识时间与日期 就目前来说,即使标注为GMT(无论是文 ...

  8. PSP Daily桌面软件Beta阶段WBS以及PSP【王者荣耀交流协会】

    一.WBS 工具:ProcessOn,请访问网址[https://www.processon.com/]. 分解思路:功能是什么/功能实现步骤?技术原型demo? 二.PSP

  9. nginx负载均衡、nginx ssl原理及生成密钥对、nginx配制ssl

    1.nginx负载均衡 新建一个文件:vim /usr/local/nginx/conf/vhost/load.conf写入: upstream abc_com{ip_hash;server 61.1 ...

  10. Docker第一个应用：Hello World

    Docker应用:Hello World 前言: 最近学习了Docker相关技术点,国内关于Docker的资料大多是基于Linux系统的,但是我对Linux又不熟(实际上没用过,掩面哭笑.Jpg). ...