1.border.css 和 reset.css 两个基础样式表的优点
- border.css: 该css样式用于解决移动端1像素边框问题。问题分析:有些手机的屏幕分辨率较高,是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下,显示的并不是1个物理像素,而是2个物理像素
- reset.css: 不同浏览器对相同标签的显示效果,有时候往往不同,那么在做项目的时候就需要对基本的样式进行设置,以达到在不同浏览器下显示效果是相同的,reset.css的作用就在于此
2.解决移动端300ms点击延时问题
- 执行命令
npm install fastclick --save
引入fastclick库 - main.js中 引入这个库 如下操作
import fastClick from 'fastclick
fastClick.attach(document.body)
3.样式里面引入样式 .styl后缀名文件
使用场景:公用样式抽离出来,要更改时就只需要更改一处位置
4.stylus 预处理器
CSS 预处理,顾名思义,预先处理 CSS。那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,执行这一套骚操作之后,这个文件可编译成 CSS 文件。
-
运行命令
npm install stylus --save
-
引入 (scoped让样式自能在当前组件产生效果)
-
写样式就不用了写 {} 括号了,提高开发效率
5 .引入iconfont阿里字体图标库以及报错解决
在iconfont阿里的矢量图库中下载矢量图后运用在自己的项目时候,发现怎么运行都出现提示找不到相关文件的错误,提示如下图:
分析:在引入的时候是没有对iconfont.css中文件对相关的路径进行更改
- 没更改之前:
- 根据自己的路径对文件进行更改之后:(./iconfont/)