<!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 脚本bak文件还原mssql数据库

    # -*- coding=utf-8 -*- import pyodbc from datetime import datetime import pymssql import decimal cla ...

  2. .NET细节知识总结，不断更新

    1.catch (Exception)和catch (Exception e) Exception 类包含许多子类 程序执行的时候要将每一个类都搜索一遍 以找到符合的异常类 这样是蛮消耗资源的 影响效 ...

  3. 《Mysql 事务 - 隔离》

    一:事务概念 -  ACID(Atomicity.Consistency.Isolation.Durability,即原子性.一致性.隔离性.持久性) 二:事务产生的问题 - 多个事务同时执行的时候 ...

  4. SrpingBoot入门到入坟03-基于idea快速创建SpringBoot应用

    先前先创建Maven项目然后依照官方文档再然后编写主程序写业务逻辑代码才建立好SpringBoot项目,这样太过麻烦,IDE都支持快速创建,下面基于idea: 使用Spring Initializer ...

  5. Java中自增（++）和赋值（=）运算效率比较

    前言   将一个int型数组x[]从初值0变成1.有两种做法: // 只考虑后自增 int length = x.length; for (int i = 0; i < length; i++) ...

  6. pandas数据结构之DataFrame笔记

    DataFrame输出的为表的形式,由于要把输出的表格贴上来比较麻烦,在此就不在贴出相关输出结果,代码在jupyter notebook可以顺利运行代码中有相关解释用来加深理解方便记忆 import ...

  7. python2.7 编码问题

    python 2.7编码问题,着实令人头疼不已,这两天抽闲想真正弄明白.需要弄清楚这个问题,首先需要明白ASCII,Unicode 和 UTF-8之间的关系. 进行对上述几种概念进行描述之前,先进行简 ...

  8. 通过getAdaptiveExtension生成的动态类

    通过getAdaptiveExtension生成的动态类 方便调式使用 请放在根目录下

  9. SpringBoot exception异常处理机制源码解析

    一.Spring Boot默认的异常处理机制 1:浏览器默认返回效果 2:原理解析 为了便于源码跟踪解析,在·Controller中手动设置异常. @RequestMapping(value=&quo ...

  10. 怎样理解构造函数的原型对象prototype

    通过构造函数生成的实例对象中的属性和方法其实是从构造函数中"copy"一份后生成的, 也就是说虽然生成的对象是构造函数的实例, 但里面的属性和方法确实相互独立的, 比如下面的lil ...