前端媒体查询@media示例详解和calc()函数的使用

作者：IT小白 | 2024-03-29 10:09:42

踩

前端媒体查询

媒体查询@media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

eg：如果文档宽度小于 500 像素则修改背景颜色。效果如下：

代码如下：


@media only screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
}

not, and和 only 可用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

not	否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。
only	仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用 only 时，旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。
，	逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。换句话说，列表的行为类似于逻辑或 or 运算符。
and	用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

还可以通过媒体查询引入不同的css样式


<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

媒体查询应用的多媒体类型：

all	用于所有描述的多媒体设备
print	用于打印机设备
screen	用于电脑屏幕、平板、智能手机等
speech	用于屏幕阅读器

eg：媒体查询在一个区间


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

eg：添加文本前缀信息


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

calc 函数，用于动态计算长度值

当布局的时候，为了做到自适应我们不能把页面的宽高写死，但有一种情况，如果我们知道布局的每个板块之前都有16px的间隔，这个间隔是固定的，这时候我们就需要使用calc函数实现页面效果。

注意

1.运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

2.calc函数支持‘+’、‘-’、‘*’、‘/’ 基本运算，而且任何长度值都可以使用calc()函数进行运算。

eg：


input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/335260