style 标签

• media 媒体查询属性
• 使用区域（范围） 在 link 、style 、source 均可使用

<style media="screen,print"></style>

引申问题 想到了 css Modules 模块实现的？

• 采用的是 cssModules （Css 模块化）？
• 原理是 给当前模块 添加一个唯一的 hash 值 data-v-$
• 以此保证了 css 的局部性
• 具体怎么实现 有时间看源码
• 官方文档给出的解释
  • 当 style 标签具有 scoped 属性时，其 CSS 将只会作用于当前组件的元素。
  • 这类似于 Shadow DOM 中的样式封装，它带有一些注意事项。但是不需要任何的 polyfill
  • 他是使用 postCss 转换的

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换为：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

子组件的样式不受外部的 css 样式影响 不会产生样式渗透。不过 子组件的根节点会受到父子组件的样式的共同影响 处于 scoped 子组件 想要影响 父组件 需要使用深度选择器（:deep()）。 可以在一个 vue 的单文件组件中使用 多个 style 可以是一个局部样式 一个全局样式 [https://cn.vuejs.org/api/sfc-css-features.html](::vue 文档解释)

link 标签

<link rel="stylesheet" href="css/index.css" media="screen" /> /* 默认是all */

@import

• @import [url| String]| [list-of-queries] //媒体查询条件

响应式多列布局

• grid 基本上超过 97.56% 浏览器支持该特性
• responsiveLayout

响应式 Demo