Media Queries简单案例一
案例一： 1 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>test</title>
<style type="text/css">
@media(max-width:320px){/*让屏幕宽度最大为320px的设备使用该css*/
div#wrapper{
width:320px;height:50px;background-color:green;
color:silver;
}
} @media(min-width:360px) and (max-width:400px){/*让屏幕宽度从360px到400px的设备使用该css*/
div#wrapper{
width:100%;height:100px;background-color:red;
color:white;
}
}
</style>
</head>
<body>
<h1>Media Queries</h1>
<div id="wrapper">
<h2>wrapper</h2>
</div>
</body>
</html>
案例二：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>test</title>
<style type="text/css">
@media(max-width:320px){
div#wrapper{
width:320px;height:50px;background-color:green;
color:silver;
}
} @media(min-width:321px) and (max-width:400px){
div#wrapper{
width:100%;height:100px;background-color:red;
color:white;
}
}
</style>
</head>
<body>
<h1>Media Queries</h1>
<div id="wrapper">
<h2>wrapper</h2>
</div>
</body>
</html>
Media Queries简单案例一的更多相关文章
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 实践 HTML5 的 CSS3 Media Queries
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- Media Queries 详解
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel ...
- Media Queries详解
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel ...
- 基于 CSS3 Media Queries 的 HTML5 应用
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- 使用media Queries实现一个响应式的菜单
Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
随机推荐
- ORA-10618: Operation not allowed on this segment 执行存储过程权限需声明
执行SHOW_SPACE存储过程时只能在DBA角色下成功,在NORMAL角色用户下报错: ORA-10618: Operation not allowed on this segmentORA-065 ...
- 给vim编辑器自动添加行号
1.只改变当前用户的vim 在~目录下 vim .vimrc添加一行 set number 即可(普通用户权限即可) 2. 改变所有用户的vim 打开文件 /etc/vimrc 添加一行 set n ...
- MongoDB服务无法启动，发生服务特定错误：100
问题:MongoDB服务无法启动,发生服务特定错误:100 原因:没有正常关闭mongod服务,导致mongod被锁 解决方案:进入db文件夹,删除mongod.lock文件,然后重新启动服务即可
- 使用git提交代码到GitHub
0.下载Git Bash,在Windows系统可以用Git Bash通过简单的命令将代码提交到GitHub1.打开项目所在的文件夹,右键,"Git Bash Here"2.初次使用 ...
- 45. Jump Game II (Array; Two-Pointers,Greedy)
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- swift - 网络请求数据处理 - 协议处理
1. 在类的模型之中或类的结构体 里面 实现下面方法 /// 添加预约数据源模型 - rootModel class DataModelForAddNewBespeakModel: NSObject ...
- php 使用html5 XHR2 上传文件 进度显示
思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了. 在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息. ...
- SVN版本冲突中 Files 的值“ < < < < < < < .mine”无效路径中具有非法字符的解决办法
.NET 中 SVN版本冲突中 Files 的值“ < < < < < < < .mine”无效路径中具有非法字符的解决办法: 一. 1.将项目逐个进行编译, ...
- sqlserver 日期格式化
Sql Server 中一个非常强大的日期格式化函数Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVE ...
- 面向对象设计模式纵横谈：Builder 生成器模式（笔记记录）
Builder模式的缘起 假设创建游戏中的一个房屋House设施,该房屋的构建由几个部分组成,且各个部分要富于变化. 如果使用最直观的设计方法,每一个房屋部分的变化,都将导致房屋构建的重新修正…… 动 ...