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实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
随机推荐
- jQuery源码解读三选择器
直接上jQuery源码截取代码 // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ i ...
- nat 类型及打洞原理
nat 类型分4种 1.全锥形 full cone A 与 主机B交互,nat转换 A的内部地址及端口为 ip1 port1,ip1和port1为对外地址,任何机器能访问. 2.ip 受限制(对B而 ...
- V4 V7 V13支持包的区别
三者均为支持包,可以让低版本系统使用高版本特性,支持最小版本有差异 V4支持1.6以上 V7支持2.1以上 V13支持3.2以上 V7依赖V4
- js获取地址栏信息
参考: http://www.w3school.com.cn/jsref/dom_obj_location.asp http://www.xxx.com:8081/ location.host = w ...
- Java finalize以及Garbage Collection
Java的垃圾回收机制: Java的垃圾回收并不等于C++中的析构.Java中,只有在程序濒临存储空间用完的那一刻,对象占用的空间才会释放.所以,在JAVA程序中,我们通常只考虑创建对象,而从不关心对 ...
- js字符串解析成数字
parseInt() 先把参数转换成字符串:左边有连续的数字则返回数值,若没有则返回NaN. console.log('parseInt(null)',parseInt(null)); // NaN ...
- .NET中的文件IO操作实例
1.写入文件代码: //1.1 生成文件名和设置文件物理路径 Random random = new Random(DateTime.Now.Millisecond); ); string Physi ...
- JAVA知识积累 JSP第一篇【JSP介绍、工作原理、生命周期、语法、指令、行为】
什么是JSP JSP全名为Java Server Pages,java服务器页面.JSP是一种基于文本的程序,其特点就是HTML和Java代码共同存在! 为什么需要JSP JSP是为了简化Servle ...
- swift - 画图 - 画矩形，虚线，圆和半圆
import UIKit class JYJYBouncedCouponsViewCellBgView: UIView { //一定要在这里设置 背景色, 不要再draw里面设置, override ...
- OpenStack的架构详解（转）
OpenStack既是一个社区,也是一个项目和一个开源软件,它提供了一个部署云的操作平台或工具集.其宗旨在于,帮助组织运行为虚拟计算或存储服务的云,为公有云.私有云,也为大云.小云提供可扩展的.灵活的 ...