css3 @media 实现响应式布局
使用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 实现响应式布局的更多相关文章
- CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式 Med ...
- CSS3学习笔记--media query 响应式布局
语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- Css3中的响应式布局的应用
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...
- CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...
- 六、使用media实现响应式布局
常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...
- 使用 media 实现响应式布局
最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo.其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
随机推荐
- centos7下安装docker(13.1docker存储--data volume)
我们现在知道docker 有两种存储方式:storage driver和data volume stroage driver这种存储方式主要是存储那些无状态的数据,是镜像层和容器层组成的,而data ...
- linux系统自签发免费ssl证书,为nginx生成自签名ssl证书
首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后他会要求你输入这个key文件的密码.不推荐输入.因为以后要给nginx使用.每次rel ...
- canvas.toDataURL 画布导出图片
<html> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <he ...
- 关于PHP中浏览器禁止Cookie后,Session能使用吗?
sessionid是存储在cookie中的,解决方案如下: Session URL重写,保证在客户端禁用或不支持COOKIE时,仍然可以使用Session session机制.session机制是一种 ...
- 区分Web Server和应用服务器
一般的信息服务系统架构如下图所示: Web Server:提供Web信息浏览服务,主要处理的静态资源(session,request,js,html,cs等),如响应http请求,响应请求返回静态ht ...
- python 获取当前路径
使用os模块: os.path.realpath(__file__)
- 堆-STL
往堆中加一个元素的算法(put): #include<algorithm> void put (int d) { heap[++heap_size]=d; push_heap(heap+, ...
- python 3.6练习题(仿购物车)
opop = [ ('Iphone', 9800), ('Bike', 800), ('Mac Pro', 12000), #定义商品列表 ('Pyhon book', 120), ('Telas', ...
- git速度太慢
适用各种操作系统,本次测试于ubuntu,下载速度从二十几k提高到二百多k 1.查找域名对应的ip地址,并修改hosts文件 nslookup github.global.ssl.fastly.Net ...
- Linux下对inode和块的理解
基本概念 首先讲下inode和块的基本概念.在Linux系统中,文件由元数据和数据块组成.数据块就是多个连续性的扇区(sector),扇区是文件存储的最小单位(每个512字节).块(block)的大小 ...