<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./mediaTest.css" media="(max-width:640px)" >  注: 在link中加  media="(max-width:640px)"   是对整个mediaTest.css文件起作用
                                            用法。。。
<title>框架起手势</title>
</head>
 
下面是 “./mediaTest.css” 这个文件:
@media only screen and (max-width:639px) {
    body {  background-color: red }
    /* 清楚浮动 */
    .left, .right {clear: both;}
  }

@media only screen and (max-width:640px)中的问题,响应式布局的更多相关文章

  1. css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题

    respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请 ...

  2. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  3. Css3中的响应式布局的应用

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...

  4. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  5. CSS3 响应式布局: @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  6. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

  7. 使用 media 实现响应式布局

    最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo.其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要 ...

  8. CSS3学习笔记--media query 响应式布局

    语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...

  9. css3 @media 实现响应式布局

    使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...

  10. 六、使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...

随机推荐

  1. 余额表前后台操作和对应sql

    发生额的含义:产生于账行表. gl_je_lines账行表——>借贷(会产生额度,即发生额) —————————————————————————— gl_balances余额表: 余额   =  ...

  2. Tencent QQ现在就是一个十八层地狱下面的大恶魔-删除右键里的"通过QQ发送到"

    都是流氓软件, 有人推荐装什么管家什么助手来清除, 那就是请走一个流氓又引进另外一个流氓. 下面的注册表项直接手工删除 32位系统: windows Registry Editor Version 5 ...

  3. Python3 离线安装TensorFlow包

    Python3 离线安装TensorFlow包 1,下载包 官网地址:https://pypi.org/project/tensorflow/1.1.0rc2/#files 清华镜像:https:// ...

  4. Spring-Data-Redis 下实现jedis连接断开后自动重连

    原先使用jedis的时候,处理手段是在从连接池获取连接时捕获JedisConnectionException异常,在异常处理部分重新获取连接,但是spring data redis似乎不会,如下所示: ...

  5. MySql概念(二)

    一.Sql规范? sql是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 在使用它时,只需要发出“做什么 ...

  6. eclipse在注释时候字体变成繁体字

    输入法和java中的快捷键冲突了,按下ctrl+shift+F就切换回去了

  7. 非关系型数据库&&缓存

    面试其他篇 目录: 1.1

  8. answerOpenCV轮廓类问题解析

    contour在opencv中是一个基础的数据结构,灵活运用的话,作用很大.以contour为关键字,在answerOpenCV中能够发现很多有趣的东西. 1.无法解决的问题 http://answe ...

  9. 【Python043-魔法方法:算术方法2】

    一. 反运算符 当对应的操作数不支持调用时,反运算数被调用(参考资料Lhttps://fishc.com.cn/thread-48793-1-1.html ) 1.对象(a+b)相加,如果对象a有__ ...

  10. 在Linux系统上卸载playOnLinux

    1.remove just the playonlinux package itself. sudo apt-get remove playonlinux 2.remove the playonlin ...