calc

在 CSS 中，calc() 是一个非常有用的函数，它允许你在 CSS 属性值中进行数学计算。这使得你可以根据不同的长度单位（如像素、百分比等）动态地计算属性值，为网页布局提供了更大的灵活性。以下是关于 calc() 的详细介绍：

基本语法

calc() 函数的基本语法如下：

1	calc(expression)

其中 expression 是一个数学表达式，该表达式可以包含加（+）、减（-）、乘（*）、除（/）四种基本运算符，同时可以使用不同的长度单位，如 px、%、em、rem 等。需要注意的是，运算符前后必须有空格。
示例代码及解释

使用 calc() 进行宽度计算

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      width: 800px;
      background-color: lightgray;
      padding: 20px;
    }

    .child {
      /* 子元素宽度为父元素宽度减去40px */
      width: calc(100% - 40px);
      background-color: lightblue;
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

在上述代码中，.child 元素的宽度通过 calc(100% - 40px) 计算得出，即父元素宽度减去 40px。这样可以确保子元素在父元素内部有一定的左右边距。

使用 calc() 进行高度计算

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    .box {
      /* 元素高度为视口高度的50%加上20px */
      height: calc(50vh + 20px);
      background-color: lightgreen;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

在这个例子中，.box 元素的高度通过 calc(50vh + 20px) 计算，即视口高度的 50% 再加上 20px。

注意事项

运算符前后的空格：在 calc() 函数中，运算符（+、-、*、/）前后必须有空格，否则表达式将无效。例如，calc(100% - 40px) 是正确的，而 calc(100%-40px) 是错误的。

计算规则：乘法和除法运算符的优先级高于加法和减法运算符。例如，calc(10px + 5 * 2px) 会先计算 5 * 2px，再加上 10px，结果为 20px。

兼容性：calc() 函数在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能存在兼容性问题。在使用时，建议进行兼容性测试。

媒体查询

CSS 媒体查询是实现网页响应式设计的关键技术，它能让网页在不同设备和屏幕尺寸下都有良好的显示效果。以下从基础概念、语法、常见应用场景和注意事项等方面详细介绍 CSS 媒体查询的学习要点。

基础概念

媒体查询允许你根据设备的各种特性（如屏幕宽度、高度、分辨率、设备方向等）来应用不同的 CSS 样式。通过媒体查询，可以为不同的设备环境定制特定的样式规则，从而实现网页在多种设备上的自适应布局。

基本语法

媒体查询使用 @media 规则，其基本语法如下：

@media media_type and (media_feature) {
    /* 当条件满足时应用的 CSS 规则 */
    selector {
        property: value;
    }
}

media_type（媒体类型）：指定适用的设备类型，常见值有：
all：适用于所有设备，是默认值。
screen：用于计算机屏幕、平板电脑、智能手机等。
print：用于打印机和打印预览。
speech：用于屏幕阅读器等语音合成设备。
media_feature（媒体特性）：描述设备的具体特性，通常以括号包裹。常见的媒体特性有：
width、min-width 和 max-width：分别表示屏幕宽度、最小屏幕宽度和最大屏幕宽度。例如 (min-width: 768px) 表示屏幕宽度大于等于 768 像素。
height、min-height 和 max-height：分别表示屏幕高度、最小屏幕高度和最大屏幕高度。
orientation：表示设备的方向，值为 portrait（竖屏）或 landscape（横屏）。

逻辑运算符

可以使用逻辑运算符组合多个媒体特性或媒体类型，使查询条件更灵活：

and：用于连接多个媒体特性，表示所有条件都必须满足。例如：

@media screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 16px;
    }
}

上述代码表示在屏幕设备且宽度在 768px 到 1023px 之间时，将 body 元素的字体大小设置为 16px。
,（逗号）：表示或的关系，只要其中一个条件满足即可。例如：

@media screen and (max-width: 767px), print {
    .sidebar {
        display: none;
    }
}

这段代码表示在屏幕设备宽度小于等于 767px 或者在打印时，隐藏 sidebar 元素。
not：用于取反查询结果。例如：

1
2
3

@media not screen and (min-width: 768px) {
    /* 样式规则 */
}

表示除了屏幕设备且宽度大于等于 768px 的情况外，应用这些样式。
常见应用场景

响应式布局

根据不同屏幕宽度调整页面布局。例如，在小屏幕设备上采用单列布局，大屏幕设备上采用多列布局：

/* 小屏幕设备（宽度小于 768px） */
@media screen and (max-width: 767px) {
    .column {
        width: 100%;
    }
}
/* 中等屏幕设备（宽度在 768px 到 1023px 之间） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .column {
        width: 50%;
    }
}
/* 大屏幕设备（宽度大于等于 1024px） */
@media screen and (min-width: 1024px) {
    .column {
        width: 33.33%;
    }
}

在不同屏幕尺寸下调整字体大小以提高可读性：

/* 小屏幕设备 */
@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }
}
/* 大屏幕设备 */
@media screen and (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

图片显示优化

根据设备分辨率和屏幕大小显示不同尺寸的图片，节省带宽：

/* 小屏幕设备 */
@media screen and (max-width: 767px) {
    .image {
        background-image: url('small-image.jpg');
    }
}
/* 大屏幕设备 */
@media screen and (min-width: 1024px) {
    .image {
        background-image: url('large-image.jpg');
    }
}

注意事项

媒体查询顺序：媒体查询的顺序很重要，因为后面的规则可能会覆盖前面的规则。一般建议按照从小到大（或从大到小）的屏幕尺寸顺序编写媒体查询。

浏览器兼容性：现代浏览器对媒体查询的支持很好，但在一些旧版本浏览器中可能存在兼容性问题。可以使用 CSS 前缀或借助 CSS 预处理器（如 Sass、Less）来处理兼容性。