CSS3媒体查询实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
list-style-type: none;
} ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
} @media screen and (max-width: 639px){
ul li a {
padding-left: 30px;
color:red;
}
} @media screen and (max-width: 819px) and (min-width: 640px) {
ul li a {
padding-left: 30px;
color:green;
}
} @media screen and (max-width: 1019px) and (min-width: 820px) {
ul li a {
padding-left: 30px;
color:yellow;
}
} @media screen and (min-width: 1020px) {
ul li a {
padding-left: 30px;
color:pink;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口,查看效果!</h1>
<ul>
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>
</body>
</html>
CSS3媒体查询实例的更多相关文章
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- 揭开CSS3媒体查询迷雾(min-width和max-width)
本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(media queries)是响应式设计(Respo ...
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3 媒体查询的学习。
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
随机推荐
- springboot集成elk 一: springboot + Elasticsearch
1.ELK介绍 1> Elasticsearch是实时全文搜索和分析引擎, 提供搜集.分析.存储数据三大功能: 是一套开放REST和JAVA API等结构提供高效搜索功能,可扩展的分布式系统. ...
- canvas与svg的区别
1.历史: canvas是html5提供的新元素. 而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或 ...
- java23种设计模式之八: 工厂方法模式
定义: 定义一个创建产品对象的工厂接口,将产品对象的实际创建工作推迟到具体子工厂类当中.这满足创建型模式中所要求的“创建与使用相分离”的特点. 我们把被创建的对象称为“产品”,把创建产品的对象称为“工 ...
- java多线程上篇(三) -- 进程通信和线程死锁简单介绍
进程通信指的是进程间的信息交换 ,IPC(Inter-Process Communication,进程间通信) 进程通信就相当于一种工作方式.沟通形式,进程通信主要指的就是操作系统提供的进程通信工具( ...
- Windows下jmap命令报错问题
最近换了笔记本,新的工作环境下jmap命令居然在报错,而jps.jstat.jinfo.jstack都能正常使用,所以初步排除进程号的问题. Attaching to core 17536 fr ...
- redis 持久化 ——RDB
文章目录 RDB 关于 fork dump.rdb 文件 如何触发 RDB 快照 如何恢复 优势 劣势 停掉 RDB RDB redis database 的简写 : 在指定时间间隔后,将内存中的数据 ...
- centos7 通过yum安装mysql
但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载mysql的repo源 $ wget http://repo.mysql.co ...
- Python 同级目录import报错
在使用protobuf时,我们自己了各种Options的时候,在生成的python文件会在同级目录中引用,所以这个时候我们不能做到,加个__init__.py文件了事然后在文件里面写 import m ...
- 跟我一起学编程—《Scratch编程》第24课:幸运大转盘
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...
- raise ImproperlyConfigured('mysqlclient 1.3.13 or newer is required; you have %s.' % Database.__version__)
转自:http://www.cnblogs.com/xiaobinglife/articles/10716605.html 一.Django数据同步过程中遇到的问题: 1.raise Improper ...