<!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. 洛谷 题解 UVA10048 【噪音恐惧症 Audiophobia】

    [题意] 输入一个\(C\)个点\(S\)条边 \((C<=100)\) \((S<=1000)\)的无向带权图,边权表示该路径上的噪声值.当噪声太大时,耳膜可能会收到损伤,所以当你从某点 ...

  2. mysql--简单操作

    一.数据库的基本操作 查看当前所有存在的数据库 show databases; //mysql 中不区分大小写.(databank 是之前创建的) 创建数据库 create database data ...

  3. 日常工作问题解决：rhel7下配置多路径设备

    目录 1.情景描述 2.安装多路径软件 2.1 安装多路径 2.2检查安装情况 2.3 重启系统 2.4 将多路径软件添加至内核模块 2.5 检查内核添加情况 2.6 启动multipath服务 2. ...

  4. CDH建表字符集问题

    登陆metadata数据库: show variables like 'character_set%'; alter database hivemeta default character set l ...

  5. 开始使用 git（配置+常用命令）

    ▶ 注意 页面显示问题: -- 是两个短横线 - 是一个横短线 由于显示问题导致两个短横线之间没有空格,看起来像是一条横线,实则是两条短横线 ▶ git 常用命令 ◆ git add ● git ad ...

  6. COleVariant类

    COleVariant本质上是一个枚举,用同一种类型来表达不同的子类型.如同boost中的variant. COLeVariant类是对VARIANT结构的封装. VARIANT结构包含两部分.其一是 ...

  7. PAT甲级 二叉查找树 相关题_C++题解

    二叉查找树 PAT (Advanced Level) Practice 二叉查找树 相关题 目录 <算法笔记> 重点摘要 1099 Build A Binary Search Tree ( ...

  8. LC 144. / 94. / 145. Binary Tree Preorder/ Inorder/ PostOrder Traversal

    题目描述 144. Binary Tree Preorder Traversal 94. Binary Tree Inorder Traversal 145. Binary Tree Postorde ...

  9. dubbo中使用的zookeeper，netty以及javassist的Demo文件

    javassist测试Demo netty测试Demo zookeeper测试Demo

  10. Scratch2.0教材（9）——合体大变身

    教材说明 ——————— 1．本教材共96节课,适用于3-5年级.40人.40分钟的课堂: 2．初期我会把每节课的代码控制在10行以内,后期再逐渐增加: 3．欢迎提意见. 课程摘要 ——————— [ ...