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

<!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. python代理可用检测、代理类型检测

    #coding:utf-8 import urllib2 def url_user_agent(proxy,url): proxy_support = urllib2.ProxyHandler({'h ...

  2. 【转载】 大龄码农那些事——也谈996.ICU

    原文地址: https://www.cnblogs.com/helloyaren/p/10657414.html 请扫码关注!!! 您的关注将是您做的最正确的事情!!! 大龄码农那些事专注分享大龄码农 ...

  3. C高级第二次PTA作业

    6-7 删除字符串中数字字符 1.设计思路: (1)算法: 第一步:定义一个字符数组item,输入一个字符串赋给字符数组item.调用函数delnum, 第二步:在函数delnum中定义循环变量i=0 ...

  4. PHP安全之webshell和后门检测(转)

    基于PHP的应用面临着各种各样的攻击: XSS:对PHP的Web应用而言,跨站脚本是一个易受攻击的点.攻击者可以利用它盗取用户信息.你可以配置Apache,或是写更安全的PHP代码(验证所有用户输入) ...

  5. c++函数参数类型-引用、指针、值

    c++函数参数类型-引用.指针.值 https://www.cnblogs.com/lidabo/archive/2012/05/30/2525837.html

  6. Mariadb-10.1.22配置项

    ## These groups are read by MariaDB server.# Use it for options that only the server (but not client ...

  7. 初学html的单词笔记

    font-size: 文字大小color: 顏色solid: 边框线text-align: 間距center: 文字放在中間<head> 网页头部<title> 网页标题< ...

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

    #### **教材学习总结**网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. * ...

  9. C语言--第六周作业评分和总结(5班)

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1250 一.评分要求 要求1 完成PTA第六周所有题,若存在抄袭现象,倒扣此题 ...

  10. Liunx----vi编辑器

    关于vi编辑器基本的用法总结如下: vi是linux下的一款文编编辑器. 进入vi的方法:在系统启动起来后,直接键入vi或vi 文件名: 进去后输入内容方法:输入a或i,切换到编辑模式: 退出编辑模式 ...