两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

1
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css

在media属性里:

    screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
    and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
    (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。
1
<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

另一种方式,即是直接写在<style>标签里:

1
2
3
4
5
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

写法是前面加@media,其它跟link里的media属性相同。
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。

1
2
3
4
5
6
@media screen and (max-width: 600px) {
  .class {
    background: #fff;
   你的样式
  }
}

Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。

1
2
3
4
5
@media screen and (min-width: 900px) {
  .class {
    background: #fff;
  }
}

Multiple Media Queries
你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

1
2
3
4
5
@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #fff;
  }
}

响应式web设计之@media的更多相关文章

  1. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  2. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  3. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  4. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  5. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  6. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  7. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  8. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  9. CSS响应式web设计

    参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...

随机推荐

  1. 如何确定拍照时,相机屏幕是横屏or竖屏?

    http://www.eoeandroid.com/thread-80028-1-1.html TAG_DATETIME时间日期 TAG_FLASH闪光灯 TAG_GPS_LATITUDE纬度 TAG ...

  2. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  3. [lua, mysql] 将多条记录数据组合成一条sql插入语句(for mysql)

    -- 演示将多条记录数据组合成一条sql插入语句(for mysql) function getTpl0(tname) -- 获取表各个字段 local t = { tpl_pack = {" ...

  4. tf.variable_scope

    转载:https://blog.csdn.net/gaoyueace/article/details/79079068 例如: #在名字为ae的命名空间内创建变量 with tf.variable_s ...

  5. cocos2d - 翻转两个Sprite

    用两个图片初始化两个CCSprite,一样的大小,重叠在一起,分别叫做 foregroundNode 和 backgroundNode . - (void)flipover { if (isFlipi ...

  6. js(数组篇02)

    原文:http://www.cnblogs.com/zaking/p/8686676.html 上一篇文章简单的介绍了一下js的类型,以及数组的增删方法.这一篇文章,我们一起来看看数组还有哪些用法,以 ...

  7. 安卓开发笔记——WebView组件

    我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...

  8. [转]Linux内核源码详解--iostat

    Linux内核源码详解——命令篇之iostat 转自:http://www.cnblogs.com/york-hust/p/4846497.html 本文主要分析了Linux的iostat命令的源码, ...

  9. Linux┊理解devfs、sysfs、udev、tmpfs等各种文件系统

    https://www.cnblogs.com/yangliheng/p/6187193.html https://blog.csdn.net/qq258711519/article/details/ ...

  10. 安卓webview子线程网络请求,怎么获得结果?

    向webview注入网络上的js,就需要请求js的url.但不允许在主线程直接发http请求,需要开子线程,开了子线程后,子线程就自己运行,主线程也自己运行,但是我的主线程需要子线程的结果才能继续往下 ...