2024年最新vue项目开发之样式篇——postcss插件(1),2024年最新前端高级面试题及答案

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 8.stylelint

  • 9.LostGrid

  • 三、配置

一、postcss插件简介及安装

===============================================================================

PostCSS是一款使用插件去转换CSS的工具,有许多非常好用有趣的插件,例如autoprefixer,press或者postcss-preset-env等。这些都是基于postcss插件去实现的。postcss插件需要结合webpack打包工具去一起使用,另生产样式文件时还可以结合gulp使用。

安装方法:先安装插件

npm i -s postcss-preset-env

再配置文件:使用.postcssrc(JSON),.postcssrc.js或者postcss.config.js

二、插件介绍

=====================================================================

1.postcss-advanced-variables


可以像scss一样,在css文件中写变量 、条件、循环语法。

官方文档

2.postcss-partial-import


可以使用@import引入别的模块样式

官方文档

3.postcss-px-to-viewport(移动端适配方案)☆☆☆


适合于移动端适配方案开发,将px单位转化成vh,vw百分比

配置如下:

‘postcss-px-to-viewport’: {

unitToConvert: “px”, // 默认值px,需要转换的单位

viewportWidth: 375, // 视窗的宽度,对应设计稿宽度

viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置

unitPrecision: 3, // 指定px转换为视窗单位值的小数位数

propList: [“*”], // 转化为vw的属性列表

viewportUnit: “vw”, // 指定需要转换成视窗单位

fontViewportUnit: “vw”, // 字体使用的视窗单位

selectorBlaskList: [“.ignore-”], // 指定不需要转换为视窗单位的类

mediaQuery: false, // 允许在媒体查询中转换px

minPixelValue: 1, // 小于或等于1px时不转换为视窗单位

replace: true, // 是否直接更换属性值而不添加备用属性

exclude: [], // 忽略某些文件夹下的文件或特定文件

landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)

landscapeUnit: “vw”, // 横屏时使用的单位

landscapeWidth: 1134 // 横屏时使用的视窗宽度

}

注意:

1、@media 默认不转化px,可配置mediaQuery: true

2、@keyframes 默认不转化px,可手动转vw

官方中文文档

4.autoprefixer


可根据不同浏览器生产兼容浏览器样式前缀,不用手动一一添加前缀

官方中文文档

5.precss


可以像scss一样,在css文件中写混合、模块化语法。

官方中文文档

更多有趣的插件请☞这里

6.postcss-cssnext


7.postcss-modules

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。


(https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-6h7qVWTW-1715715501517)]
[外链图片转存中…(img-TyUZlMUN-1715715501518)]

  • 13
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值