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实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
随机推荐
- stl-stack+括号配对问题
栈:stl的一种容器,遵循先进后出原则,,只能在栈的顶部操作,就像放盘子一样,洗好的盘子叠在上面,需要用时也是先从顶部拿.不允许被遍历,没有迭代器 基本操作: 1.头文件#include<sta ...
- SQL数据库简单的建立与操作
数据类型 符号标志 整数型 bigint,int,smallint,mediumint,tinyint 精确数值型 decimal,numeric 浮点型 float,real,double 位型 b ...
- zg项目 应用系统编码原则
一.编码说明: 1.系统编码采用三码为原则,通常两码简称之. 1>.子系统或类型 2>.系统小分类 3>.系统大分类 如 IPMS领域业务群: DA 应用软件发展管理系统 DE公用副 ...
- Installation failed with message INSTALL_CANCELED_BY_USER.
Installation failed with message INSTALL_CANCELED_BY_USER. It is possible that this issue is resolve ...
- MySql的基本架构演变
[MySql的基本架构演变] 没有并发的增长,也就没有必要做高可扩展性的架构. Scale-up : 纵向扩展,通过替换为更好的机器和资源来实现伸缩,提升服务能力 Scale-out : 横向扩展, ...
- selenium IDE常用命令
1.open(URL)命令 1.作用:打开指定的URL,URL或者为相对或是绝对的URL 2.target:要打开的URL,value值 ...
- tomcat发布webservice
编写后台代码: package test; import javax.jws.WebParam; import javax.jws.WebService; @WebService public cla ...
- IsPostBack用法
可以自己定义 在页面中定义隐藏的input,设置为ispostback. <form action="" method=""> <input ...
- 165. Compare Version Numbers比较版本号的大小
［抄题］: Compare two version numbers version1 and version2.If version1 > version2 return 1; if versi ...
- .Net多线程 并行编程(三)---并行集合
为了让共享的数组,集合能够被多线程更新,我们现在(.net4.0之后)可以使用并发集合来实现这个功能. 而System.Collections和System.Collections.Generic命名 ...