CSS3 基础（015_媒体查询 - 示例）

最新推荐文章于 2024-05-22 12:05:09 发布
最新推荐文章于 2024-05-22 12:05:09 发布
阅读量932 收藏 1
点赞数
分类专栏： CSS 文章标签： css3

原始网址：http://www.w3schools.com/css/css3_mediaqueries_ex.asp

翻译：

CSS3 媒体查询 - 示例（CSS3 Media Queries - Examples）

CSS3 媒体查询 - 更多示例（CSS3 Media Queries - More Examples）

请查看使用 media queries 的更多示例。
我们以名称列表开始，该名称列表的功能实为邮件链接。HTML 如下：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}
</style>
</head>
<body>
    <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>

注意：data-email 属性是 HTML5 里的，我们可以使用带 data- 前缀的属性存储信息。我们将在之后用到 data- 属性。

宽度在 520 至 699 像素之间 - 对每个链接应用邮件图标

当浏览器的宽在 520 至 699 像素之间时，我们将对每个邮件链接应用邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}
</style>
</head>
<body>
    <h1>Resize the browser window to see the effect!</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>

宽度在 700 至 1000 像素 - 以文本为链接的开头

当浏览器的宽度在 700 至 1000 像素之间时，我们将以文本 "Email: " 作为每个邮件链接的开头：

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
    <h1>Resize the browser window to see the effect!</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>

宽度在 1001 像素之上 - 应用邮件地址作为链接

当浏览器的宽度在 1001 像素之上时，我们将对链接附上邮件地址。
我们将使用 data- 属性的值在人名之后添加邮件地址：

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
    <h1>Resize the browser window to see the effect!</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>

宽度在 1151 像素之上 - 添加我们之前使用过的图标

对于浏览器的宽度在 1151 像素之上，我们将再次添加我们之前使用过的图标。
在此，我们不必写一个额外的媒体查询块，我们可以用 ,（类似于 OR 操作符）将这个额外的媒体查询附于已存在的媒体查询块之后：

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) , ( min-width
    : 1151px) {
    ul li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
    <h1>Resize the browser window to see the effect!</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>

更多示例

在 web 页面的工具栏内使用邮件链接列表

<!DOCTYPE html>
<html>
<head>
<style>
#nav {
    list-style-type: none;
}

#nav li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}

#nav {
    width: 35%;
    float: left;
}

@media screen and (max-width: 699px) and (min-width: 520px) , ( min-width
    : 1151px) {
    #nav li a {
        padding-left: 30px;
        background: url("http://www.w3schools.com/css/email-icon.png") left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    #nav li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    #nav li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
    <h1>Resize the browser window to see the effect!</h1>
    <ul id="nav">
        <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>
    <div id="main">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</body>
</html>
柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 多媒体查询实例
12-13
接下来，我们使用CSS3的媒体查询来改变不同屏幕尺寸下的样式： 1. **520px至699px宽度**：在这个范围内，我们为链接添加邮件图标。通过以下CSS实现： ```css @media screen and (max-width: 699px) and (min-...
BookSourceCode-HTML5_and_CSS3-css source code
03-25
HTML5是超文本标记语言的第五个版本，而CSS3则是层叠样式表的最新标准，两者共同构成了现代网页设计的基础。 **HTML5知识点**： 1. **新元素的引入**：HTML5新增了多个语义化元素，如、、、、、等，这些元素帮助...
媒体查询Media Query
weixin_50723416的博客
03-23 240
媒体查询（Media Query）是CSS3新语法。 @media 可以针对不同的屏幕尺寸设置不同的样式。 语法规范： @media mediatype and | not | only (media feature) { css-code }; @media声明媒体查询 mediatype媒体类型 关键字 and | not | only media feature 媒体特性必须有小括号包含 media媒体类型： all 用于所有设备 print用于打印机和打印预览 scree用于电脑屏幕，平板电脑
CSS3媒体查询简介与使用方法
rr20060119的博客
09-14 785
CSS3媒体查询是一种用于根据设备的特性和特定条件来应用不同样式的CSS技术。通过媒体查询，我们可以针对不同设备（如计算机、平板电脑、手机等）和不同的条件（如屏幕宽度、设备方向等）制作响应式布局，使网页在不同设备上都能够良好地展示。
【CSS】媒体（媒介 / media）查询
最新发布
小秀的博客
05-22 904
媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。
CSS媒体查询（含案例）
qi_bai_jin的博客
10-06 5145
随着移动应用不断发展，为了适配不同屏幕尺寸需要不同的css样式，这就需要媒体查询实现响应式布局，给用户一个良好的体验，本文介绍了媒体查询的基本使用。
前端研习录（13）——媒体查询讲解及示例说明
清风不渡
07-31 877
媒体查询可以实现在不同的终端设备下达到不同的效果，会根据设备的大小自动识别加载不动的样式。
CSS3媒体查询
小郑的博客
01-23 5547
所谓的媒体查询就是指，不同的条件使用不同的样式或样式集合。 写在前面，注意的几个问题： 1.device-width 和 width的区别： device-width表示的是设备的宽度，即屏幕的宽度。width所代表的是文档宽度，与屏幕大小没有关系，如果是在移动设备上，width表示的是布局视口的宽度。 2.必要的空格。 //空格是有必要的，在某些情况下该样式永远不起作用。 link
hAdmin-master_HTML5_CSS3源码_
09-29
1. **响应式设计**：利用HTML5的媒体查询和CSS3的flexbox或grid布局，模板可以适应不同设备的屏幕尺寸，确保在手机、平板和桌面电脑上都能提供良好的显示效果。 2. **UI组件**：包括导航栏、面包屑、侧边栏、图标库...
MZnauka-css3_reason71s_css3english_css_zip_
10-02
【标题】"MZnauka-css3_reason71s_css3english_css_zip_" 指的是一个关于CSS3学习资源的压缩包，其中包含了“reason71s”、“css3english”以及“css”等关键词，暗示这可能是一个关于CSS3技术、教程或者示例的集合...
前端_HTML5_CSS3源码_
09-29
而Web-CSS文件则包含CSS3的新样式和布局技术，如媒体查询、过渡动画和Flexbox或Grid布局的应用。 通过学习这个压缩包中的源码，你可以深入理解HTML5和CSS3的核心概念，并掌握如何在实际项目中应用这些技术，从而...
CSS3之媒体查询（响应式布局）
热门推荐
qq_35401191的博客
09-02 3万+
为啥有媒体查询： 移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。 Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满） 什么是媒体查询：...
媒体查询案例
lizhipeng110的博客
03-24 652
<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> *{margin...
css media 媒体查询器案例
麻瓜博客
07-07 923
响应式布局简单理解就是为了适应不同尺寸屏幕，其核心技术为css的mediaMedia(媒体查询器)的用法。 步骤 1.定义meta标签，主要意思是来兼容移动设备的效果 <meta name="view" content="width = device-width,initial-sacle=1"> 参数解释： width = device-width：宽度等于当前设备...
响应式布局媒体查询
qq_41309350的博客
01-21 253
css中媒体查询是什么？怎么使用？ 媒体查询限制CSS样式的范围，以便仅在满足某些媒体条件时才适用。 简单来说：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。 媒体查询可用于检测的媒体特性，比如： width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询具体使用 @media [not | only] [and] (); @media screen { body{
CSS媒体查询
weixin_39818813的博客
04-19 229
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。语法媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使...
CSS（css3媒体查询）
wendy0927的博客
05-24 978
css3媒体查询 css3媒体查询是响应式方案核心 媒体类型 all 所有媒体（默认值） screen 彩色屏幕 print 打印预览 projection 手持设备 tv 电视 braille 盲文触觉设备 embossed 盲文打印机 spee...
CSS@media媒体查询，实现简单的响应式布局
捕鱼麦大叔的博客
03-07 1万+
页面相应式要求如下：代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;响应式布局练习&lt;/title&gt; &lt;style&gt; /*基本样式*/
CSS3多列布局：column-count与column-gap详解
本章节主要讲解的是CSS3中的高级布局技术，特别是针对多列布局（Multi-column Layout），这是在网页设计中实现内容优化和阅读体验...学习者可以通过实际代码示例深入理解这些CSS3布局工具，并将其应用于自己的项目中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值