<!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媒体查询实例的更多相关文章

  1. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  2. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

  3. iPhone6的CSS3媒体查询

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...

  4. CSS3媒体查询使用小结

    首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...

  5. CSS3媒体查询

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  6. 揭开CSS3媒体查询迷雾（min-width和max-width）

    本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(media queries)是响应式设计(Respo ...

  7. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  8. css3 媒体查询的学习。

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  9. Html5 @media + css3 媒体查询

    css3 media媒体查询器用法总结   随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...

随机推荐

  1. python中文编码 - python基础入门(5)

    python到目前为止,一共有两个版本,分别是2.x和3.x版本,根据官方正式通知2020年停止对python更新和维护,距离今天还有110天左右,所以正在学习python的小伙伴应该暗中庆幸一波. ...

  2. 5、1 es 数据库和mysql 数据库同步 （Windows操作系统）

    (1)在logstash-5.6.8安装目录下创建文件夹mysqletc (名称随意) (2)文件夹下创建mysql.conf (名称随意) ,内容如下: input { jdbc { #sc表 jd ...

  3. SQL-TSQL

    一.系统存储过程 常用  sp_helptext --查看可编程性(存储过程.函数.触发器.规则.默认值),表中(约束.触发器) EXEC sp_helptext f_M_Student 二.全局变量 ...

  4. 学习Elasticsearch原理笔记

    Elasticsearch是一个分布式可拓展的实时搜索和分析引擎 分布式实时文件存储,并将每一个字段都编入索引,使其可以被搜索 实时分析的分布式搜索引擎 可以拓展到上百台服务器,处理PB级别的结构化或 ...

  5. 90%程序员都没有完全答对Cookie和Session的区别

    我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...

  6. 笔记-5：mysql数据更新

    1.插入数据 1.1 插入完整的数据 # 语法格式: INSERT INTO tb_name(column_list) VALUES(value_list); tb_name:指定要插入数据的表名. ...

  7. 20191011-构建我们公司自己的自动化接口测试框架-Util的AssertResult模块

    AssertResult主要就是进行结果断言的了,因为断言结果分2种情况,一种是断言词,一种是断言sheet,如果涉及断言sheet,则需要操作excel到对应的断言表断言所有的字段并且书写断言结果主 ...

  8. SAS学习笔记26 方差分析

    对于多于两组(k>2)样本均数的比较,t检验不再适用,方差分析(analysis of variance, ANOVA)则是解决上述问题的重要分析方法.方差分析由R.A.Fisher(1923) ...

  9. （四）resultMap、sql片段与动态SQL

    一.resultMap 1.1 为什么要用resultMap resultType:指定输出结果的类型(pojo.简单类型.hashmap),将SQL查询结果映射为Java对象. 使用resultTy ...

  10. 在论坛中出现的比较难的sql问题：1(字符串分拆+行转列问题 SQL遍历截取字符串)

    原文:在论坛中出现的比较难的sql问题:1(字符串分拆+行转列问题 SQL遍历截取字符串) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方 ...