Skip to content

css

仲灏2022-04-09约 1 分钟

css

style-loader

css-loader

postcss

postcss-loader autoprefixer

功能: -webkit一

css
-webkit一transform:retate( -45deg)
transform: rotate( -45deg);

配置

js
//postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')]
}

normalize.css

CSS 重置的现代替代方案

https://www.npmjs.com/package/normalize.css

image-20220302164337113

import 'normalize.css/normalize.css'

Windi CSS

  • ⚡️速度快 - 比vue-cli-plugin- tailwind20~100 倍
  • 🧩 按需 CSS 实用程序(与 Tailwind CSS v2 兼容)和原生元素样式重置
  • 🍃 加载配置tailwind.config.js
  • 📄 CSS @apply/@screen指令转换
  • 🎳 支持实用程序组 - 例如bg-gray-200 hover:(bg-gray-100 text-red-300)

init.css

css
body {
    height: 100vh;
    width: 100vw;
}

/**
 * 适配 iphone 底部安全区(指示条,配合index.html <meta name="viewport" ... />使用
 * @supports 是CSS3新引入的规则之一,主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.
 */
@supports (bottom: env(safe-area-inset-bottom)) {
    body {
        box-sizing: border-box;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        overflow: auto;
    }
}

讨论区

欢迎留下想法与补充