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

<!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. PAT 乙级1003. 我要通过!(20)

    “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...

  2. Python之路,第三篇:Python入门与基础3

    1,  布尔运算符 运算符;    not      and   or not 运算符: 作用:逻辑取反 语法: not  表达式 例: not  True     #  False not   Fa ...

  3. Ubuntu16.04安装tensorflow+安装opencv+安装openslide+安装搜狗输入法

    Ubuntu16.04在cuda以及cudnn安装好之后,安装tensorflow,tensorflow以及opencv可以到网上下载对应的安装包并且直接在安装包所在的路径下直接通过pip与conda ...

  4. 【Java】身份证号码验证

    代码引用自:https://gitee.com/appleat/codes/ynrtqujv0wfgesm8ia9b547 package xxx; /** * Created by wdj on 2 ...

  5. Linux 修改最大连接数脚本

    #!/bin/bashfileMax=$(grep "fs.file-max" /etc/sysctl.conf | wc -l)if [ $fileMax -eq 1 ];the ...

  6. 第十三次CCF第四题 1803——04 博弈

    我又写了一个简洁版的2.0: 可以作为博弈搜索树的模板  : https://www.cnblogs.com/xidian-mao/p/9389974.html 废话ps: 开始觉得这是一道简单得博弈 ...

  7. lesson4-图像分类-小象cv

    CNN网络进化:AlexNet->VGG->GoogleNet->ResNet,深度8->19->22->152GoogleNet:Lsplit->trans ...

  8. 51Nod 1135:元根(数论)

    1135 原根  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 设m是正整数,a是整数,若a模m的阶等于φ(m),则称a为模m的一个原根.(其中φ(m) ...

  9. C语言--第七周作业评分(5班)

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1304 一.评分要求 要求1 完成PTA第七周所有题,总共两次题,每次12.5 ...

  10. 《DSP using MATLAB》Problem 5.8

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...