final

IconPark 图标

安装

npm install @icon-park/vue-next --save

引用图标

在组件的上方引用@icon-park/vue-next，并在组件的模板函数中使用:

<template>
  <PlayOne theme="outline" size="36" fill="#ffffff"/>
</template>

<script setup>
  import {PlayOne} from '@icon-park/vue-next';    
</script>

style scoped

在vue3中，当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素.

CSS @media 规则

定义和用法

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，诸如：

视口的宽度和高度
设备的宽度和高度
方向（手机或平板电脑处于横屏还是竖屏模式？）
分辨率

使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。

您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

如果浏览器窗口的宽度为 600px 或更小时，把 <body> 元素的背景颜色更改为“浅蓝色”：

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

CSS Flexbox

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

header {
  display: flex;
  place-items: center;
  padding-right: calc(var(--section-gap) / 2);
}