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实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
随机推荐
- etcd 集群恢复
七个节点,挂了5个,etcd无法访问 参考: https://coreos.com/etcd/docs/latest/op-guide/recovery.html 此次我只恢复了v3的数据 在存活的节 ...
- cmd enabledelayedexpansion
先来说说变量延迟扩展吧.当然,放狗一搜,就能看到满天飞的关于变量延迟扩展的文章,所以,我这里就简单介绍一下.先来看一段批处理: set str=test if %str%==test ( set st ...
- drupal sql 源码解析query.inc 文件
query.inc 文件: sql语句: $this->condition($field);1707 line public function condition($field, $value ...
- Wilcoxon Signed Rank Test
1.Wilcoxon Signed Rank Test Wilcoxon有符号秩检验(也称为Wilcoxon有符号秩和检验)是一种非参数检验.当统计数据中使用“非参数”一词时,并不意味着您对总体一无所 ...
- 命名空间出错 namespace Web.Skin.@default
namespace Web.Skin.default会报错 因为default是关键字/保留字,所以需要在前面加@符号; namespace Web.Skin.@default
- ECMAScript5之JSON对象属性的遍历顺序
测试浏览器 Chrome.Safari 一 键可以用parseInt解析成整数的,按数值升序顺序. var intObj = { '3.3' : 3.3, '2' : 222, '1' :111 } ...
- 53. Maximum Subarray最大求和子数组12 3（dp）
［抄题］: Find the contiguous subarray within an array (containing at least one number) which has the la ...
- Castle ActiveRecord学习（二）配置、引用、程序启动
来源:http://www.cnblogs.com/zxj159/p/4082987.html 配置数据库驱动: Model层引用:Castle.ActiveRecord.dll.NHibernate ...
- KbmMW 认证管理器说明(转载)
这是kbmmw 作者关于认证管理器的说明,我懒得翻译了,自己看吧. There are 5 parts of setting up an authorization manager: A) Defin ...
- 2018.09.24 codeforces 1053C. Putting Boxes Together（线段树）
传送门 就是让你维护动态的区间带权中位数. 然而昨晚比赛时并没有调出来. 想找到带权中位数的中点可以二分(也可以直接在线段树上找). 也就是二分出第一个断点,使得断点左边的和恰好大于或等于断点右边的和 ...