<!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. Dapper操作Sql Server和MySql数据库

    1. 在配置文件web.config中添加连接字符串 <connectionStrings> <add name="sqlconnectionString" co ...

  2. 【持续集成】jenkins安装部署从git获取代码

    一:持续集成的概念: 1.1:总体的概括 持续集成Continuous Integration 持续交付Continuous Delivery 持续部署Continuous Deployment 1. ...

  3. elasticsearch-5.6.1删除index下的某个type

    由于elasticsearch-5.6.1不支持type直接删除,只能删除数据. 执行命令: curl -H "Content-Type: application/json" -X ...

  4. sql server 日期函数

    一.sql server日期时间函数Sql Server中的日期与时间函数 1.  当前系统日期.时间     select getdate()  2. dateadd  在向指定日期加上一段时间的基 ...

  5. javascript策略模式的应用！

    最近在看<JavaScript设计模式与开发实践>这本书,受益匪浅,小记录一下书中的各个demo,加深理解: 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替 ...

  6. Elasticsearch 常用配置参数总结

    # ---------------------------------- Cluster ----------------------------------- # Use a descriptive ...

  7. TypeScript 枚举

    我们常常会有这样的场景,比如与后端开发约定订单的状态开始是0,未结账是1,运输中是2,运输完成是3,已收货是4.这样的纯数字会使得代码缺乏可读性.枚举就用于这样的场景.枚举可以让我们定义一些名字有意义 ...

  8. PPT 中用 LaTeX 插入公式、PowerPoint 中用 LaTeX 插入公式(4)

    步骤: 1. 安装 CTex 2. 安装 IguanaTex >> 下载链接1:官网 >> 下载链接2:复制链接到迅雷或IDM下载很快 3. 将「IguanaTex_v1_56 ...

  9. springboot整合thymeleaf——引用静态资源

    原html src="/css/index.css" thymeleaf中,th:src="@{/css/index.css}"

  10. unicode 格式 转汉字

    function decodeUnicode($str){ return preg_replace_callback('/\\\\u([0-9a-f]{4})/i', create_function( ...