手记

浏览器默认样式、1px边框问题、css预编译

在用脚手架初始化一个项目以后,我们还需要根据我们的项目来进行一些样式相关的处理。
panda-vue-template
手把手搭建vue小商城2.0

1、浏览器默认样式

  • 大家都知道各个浏览器的默认样式都有一定的差异性,而我们需要抹掉这部分的差异;有两种解决方法。
  • 在mall@v1.0就是使用reset.css来解决这个问题–>reset.css的引入,这里我们项目中使用一下normalize.css
$ npm install normalize.css --save
// main.js引入一下即可
import Vue from 'vue'

// A modern alternative to CSS resets
// https://github.com/necolas/normalize.css
+ import 'normalize.css/normalize.css'

import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  • 刷新页面后发现该有间距的地方还是有间距,该有的默认样式还是有,这时候不要质疑我是否成功引入了,当你查看normalize.css源码以后你会发现它与reset.css的区别是什么:—>normalize.css与reset.css有哪些区别?
  • normaliz.css只是在浏览器的样式差异上打了几个补丁来抹平这些差异,所以我们还添加了一份样式来对其进行补充:reset.css

2、css预编译

# 安装sass
$ npm install node-sass sass-loader --save-dev
  • 安装sass可能你会遇到点问题,老是安装不上?按下列步骤排查一下:
    1. 有可能是网络问题,使用淘宝镜像处理一下;
    2. mac用户sudo一下试试;
    3. node-sass还是安装不上,切换淘宝镜像源啊什么的都不行,那么试下这行命令。–>相关issue
$ sudo npm i --unsafe-perm node-sass -D
  • 安装成功就可以了,@vue/cli3.x不需要在去webpack配置文件里面设置了。

3、1px边框问题

  • 产生的原因:

    • 因为一个东西–DPR(DevicePixelRatio)设备像素比,是一个手机物理像素 /CSS像素的比值。
    • 但是自从retina屏以来,不同的手机有不同的像素密度,css中的1px并不等于移动设备中的1px, 最直接的表现就是1px边框问题;简单说就是你给border的css写个1px,到手机上却变粗了显示成2px
  • 很多文章的解决办法都是用postcss-write-svg这个插件来处理这个问题,其实不太好用额,网上搜了下,觉得这篇文章讲的比较ok,其中比较推荐使用伪元素来解决这个问题:–>移动端1px解决方案

  • 商城mall项目中默认使用vant组件库,所以可以使用vant团队提供的1px边框解决方案

4、其它

  • 在安装好了postcss的基础上,我们使用postcss-preset-env这个插件来让我们可以拥有使用未来css语法的能力。
  • 你也可以使用less语法,对于vue-cli3.x构建的项目,安装好了就可以用了,不需要去配置webpack的这部分内容,还是很方便的。
  • 暂时就这么多吧,后面如果还有一些基础的样式要设置的话在补充到这里。
2人推荐
随时随地看视频
慕课网APP