<!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. kafka连接报错kafka.errors.NoBrokersAvailable： NoBrokersAvailable

    问题: 本地windows系统远程连接kafka报错,kafka.errors.NoBrokersAvailable: NoBrokersAvailable. 解决: 在网上看到说是hosts文件需要 ...

  2. MAVEN（二）

    1.本地仓库?Maven到底有哪些仓库?它们什么关系? Maven仓库: 本地仓库路径配置: 包查找路径:本地——>私服——>中央仓库,然后将查找到的jar同步到私服——>本地仓库 ...

  3. Mui 沉浸模式以及状态栏颜色改变

    手机的顶部状态栏,也就是信号.电量那条,有4种状态,分别是正常.变色.透明(也称沉浸式状态栏).消失(也就是全屏).后3种特殊用法,具体见下: 这些都是真机运行不生效,需提交App云端打包后才生效: ...

  4. [转帖]APP逆向神器之Frida【Android初级篇】

    APP逆向神器之Frida[Android初级篇] https://juejin.im/post/5d25a543e51d455d6d5358ab 说到逆向APP,很多人首先想到的都是反编译,但是单看 ...

  5. Oracle日常

    Xmltype select extractvalue(value(x), '//utext') value from table(XMLSEQUENCE(extract(v_xmlContent, ...

  6. windows 下安装ElasticSearch方法

    1.https://www.oracle.com/technetwork/java/javase/downloads/jdk12-downloads-5295953.html 在此页面下载安装JDK1 ...

  7. PAT甲级 堆 相关题_C++题解

    堆 目录 <算法笔记>重点摘要 1147 Heaps (30) 1155 Heap Paths (30) <算法笔记> 9.7 堆 重点摘要 1. 定义 堆是完全二叉树,树中每 ...

  8. 20191030-Python实现闭包

    打算在过年前每天总结一个知识点,所以把自己总结的知识点分享出来,中间参考了网络上很多大神的总结,但是发布时候因为时间太久可能没有找到原文链接,如果侵权请联系我删除 20191030:闭包 首先一个函数 ...

  9. 安全篇-AES/RSA加密机制

    在服务器与终端设备进行HTTP通讯时,常常会被网络抓包.反编译(Android APK反编译工具)等技术得到HTTP通讯接口地址和参数.为了确保信息的安全,我们采用AES+RSA组合的方式进行接口参数 ...

  10. spring-cloud搭建

    1.myApplicaion 启动服务类上层必须有一层包 2.报错 com.sun.jersey.api.client.ClientHandlerException: java.net.Connect ...