<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. 爬虫之牛掰的scrapy框架

    一. Scrapy简介及安装 http://python.jobbole.com/86405/ Scrapy的详细介绍   1.简介   2.安装     1.window上安装:         先 ...

  2. 【react懒加载组件】--react-lazyload

    组件安装: npm install react-lazyload --save-dev 组件使用: //引入 import LazyLoad from 'react-lazyload'; //rend ...

  3. mysql 通过查看mysql 配置参数、状态来优化你的mysql

    我把MYISAM改成了INNODB,数据库对CPU方面的占用变小很多' mysql的监控方法大致分为两类: 1.连接到mysql数据库内部,使用show status,show variables,f ...

  4. PHP使用http_build_query()构造URL字符串的方法(可将POST参数组转换拼接成GET请求链接)

    <?php //parse_str与http_build_query的使用 //使用parse_str将url字符串转变为key=>value的数组 $str = "tn=mon ...

  5. v-on事件绑定指令

    v-on:事件绑定 v-on简写:@ 绑定click事件时: 代码: <script> window.onload= () =>{ let vm=new Vue({ el:'#two ...

  6. ORA-12052: cannot fast refresh materialized view

    SQL> execute dbms_mview.refresh ('TX_FAIL_LOG_DAY_MV', 'f'); BEGIN DBMS_MVIEW.REFRESH ('TX_FAIL_L ...

  7. 13:python-ldap

    1.1 python-ldap 基本使用 11111111111111111111

  8. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  9. c++中ifstream一次读取整个文件

    转载:http://www.cnblogs.com/kex1n/p/4028428.html 第一种方法: 读取至std::string的情况: #include <string> #in ...

  10. 利用sqlmap对网站进行sql注入检测

    1.下载sqlmap github地址:https://github.com/sqlmapproject/sqlmap/zipball/master 2.sqlmap的运行环境需要python,这个网 ...