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用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
随机推荐
- 按CSS查询一个元素
按CSS查询 示例1 查询一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...
- layui的日期控件使用
导包请看官方:https://www.layui.com/doc/modules/laydate.html#use 例如: <input type="text" id=&qu ...
- 简单谈一谈Java内部类的使用原因
使用内部类的原因 学习总得知其所以然,前面的一篇文章中我有提到过关于java内部类的几种用法以及一些示例,但是不明白内部类具体可以做什么,显然学习起来很渺茫,今天的文章简单说一说使用内部类的几个原因, ...
- [官网]Postgresql 的客户端应用 pg_config
pg_config Name pg_config -- 检索已安装版本的 PostgreSQL 的信息 Synopsis pg_config {--bindir | --includedir | -- ...
- centos7.6 yum安装mysql5.7版本
由于mysql5.5及之前的版本一些项目上线报错 卸载: 首先删除centos上原来的mysql老版本,注意备份,清理干净. 之前怎么安装的清理,防止卸载不干净会有冲突. 我之前yum安装mysql5 ...
- 自定义模块,time,datetime以及random
自定义模块,time,datetime以及random 1.自定义模块 自定义一个模块 import #导入 (拿工具箱) 模块分类 1.内置模块(标准库) --python解释器自带的.py文件(模 ...
- JavaScript list转tree
js list转tree //------------------------------------List Convert to Tree ---------------------------- ...
- python练习：函数2
习题: 定义一个方法get_num(num),num参数是列表类型,判断列表里面的元素为数字类型.其他类型则报错,并且返回一个偶数列表:(注:列表里面的元素为偶数). def get_num(num) ...
- Asp.Net Core 轻松学系列-2从安装环境开始
Asp.Net Core 介绍 Asp.Net Core是微软新一代的跨平台开发框架,基于 C# 语言进行开发,该框架的推出,意味着微软从系统层面正式进击 Linux 服务器平台:从更新速度开 ...
- 决心学HTML 第一晚
老师数他的审美观不行,怕教的我们的审美观也不行,所以,就不讲HTML了,但是期末又要考, 自己英语又不行,期末做项目又要用,我可能又要做组长,只能硬着头皮自学了. 所以,现在从第一页开始学!!! 这这 ...