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实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
随机推荐
- 疯狂JAVA——第二章 理解面向对象
面向对象的三大特征:继承.封装和多态 面向对象的方式实际上由OOA(面向对象分析).OOD(面向对象设计)和OOP(面相对象编程)三个部分组成,其中OOA和OOD的结构需要用一个描述方式来描述并记录, ...
- 项目中调试SQLServer 方便的查看SQL语句的执行时间的方法
第一种方法,先记录执行前的时间,然后在记录执行Sql后的时间,然后做减法 1 第一种方法: 2 declare @begin_date datetime 3 declare @end_date dat ...
- js：Date格式化
将Date类型格式化为"yyyy/MM/dd HH:mm:ss" 函数代码如下: //Date的prototype 属性可以向对象添加属性和方法. Date.prototype.F ...
- MVVM 的理解
MVVM 是 Model - View - ViewModel 的缩写 可以看到他和之前的MVC很像,的确有人称之为一个加强优化版的MVC. 是一种模块化开发代码分层的思想或者框架! MVVM 的优点 ...
- string类小结
要想使用标准C++中string类,必须要包含 #include <string>// 注意是<string>,不是<string.h>,带.h的是C语言中的头文件 ...
- C++ auto
auto用来声明自动变量.它是存储类型标识符,表明变量(自动)具有本地范围.块范围的变量声明(如for循环体内的变量声明)默认为auto存储类型. 好处:auto变量在离开作用域是会变程序自动释放,不 ...
- 4-计算九位数以内各个位数字和为s的种类
/*假设我们当前要求的是100以内各位数之和和等于s的数有多少个,可以想到就是10以内各位数之和等于s的数的个数再加上10到100内的各位数之和等于s的个数.令dp[i][j]就代表10的j次方内各位 ...
- 手机端图片预览和缩放js
转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...
- php代码执行顺序
从上往下,调用类里面的方法,类放上面,调用在下面
- Memocache
http://blog.csdn.net/zhoufoxcn/article/details/6282099 http://blog.csdn.net/dinglang_2009/article/de ...