使用css3的@media,可以实现针对不同媒体、不同分辨率的响应式布局。

方法1:根据不同分辨率使用不同css文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

例如

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="middle.css" />

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

方法2:同一css文件中,根据不同分辨率使用不同样式

.first {background-color: white;}
.second {background-color: black;}

@media screen and (max-width: 800px) {
 /*当屏幕尺寸小于800px时,应用下面的CSS样式*/
    .first {background-color: green;}
    .second {background-color: skyblue;}
}

@media screen and (max-width: 480px) {
 /*当屏幕尺寸小于480px时,应用下面的CSS样式*/
    .first {background-color: yellow;}
    .second {background-color: red;}
}

参考:

http://www.runoob.com/cssref/css3-pr-mediaquery.html

css3 @media 实现响应式布局的更多相关文章

  1. CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式   Med ...

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

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

  3. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

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

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

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

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

  6. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

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

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

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

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

  9. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

随机推荐

  1. centos7下安装docker(13.1docker存储--data volume)

    我们现在知道docker 有两种存储方式:storage driver和data volume stroage driver这种存储方式主要是存储那些无状态的数据,是镜像层和容器层组成的,而data ...

  2. linux系统自签发免费ssl证书,为nginx生成自签名ssl证书

    首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后他会要求你输入这个key文件的密码.不推荐输入.因为以后要给nginx使用.每次rel ...

  3. canvas.toDataURL 画布导出图片

    <html> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <he ...

  4. 关于PHP中浏览器禁止Cookie后,Session能使用吗?

    sessionid是存储在cookie中的,解决方案如下: Session URL重写,保证在客户端禁用或不支持COOKIE时,仍然可以使用Session session机制.session机制是一种 ...

  5. 区分Web Server和应用服务器

    一般的信息服务系统架构如下图所示: Web Server:提供Web信息浏览服务,主要处理的静态资源(session,request,js,html,cs等),如响应http请求,响应请求返回静态ht ...

  6. python 获取当前路径

    使用os模块: os.path.realpath(__file__)

  7. 堆-STL

    往堆中加一个元素的算法(put): #include<algorithm> void put (int d) { heap[++heap_size]=d; push_heap(heap+, ...

  8. python 3.6练习题(仿购物车)

    opop = [ ('Iphone', 9800), ('Bike', 800), ('Mac Pro', 12000), #定义商品列表 ('Pyhon book', 120), ('Telas', ...

  9. git速度太慢

    适用各种操作系统,本次测试于ubuntu,下载速度从二十几k提高到二百多k 1.查找域名对应的ip地址,并修改hosts文件 nslookup github.global.ssl.fastly.Net ...

  10. Linux下对inode和块的理解

    基本概念 首先讲下inode和块的基本概念.在Linux系统中,文件由元数据和数据块组成.数据块就是多个连续性的扇区(sector),扇区是文件存储的最小单位(每个512字节).块(block)的大小 ...