浏览器默认样式、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预编译 本项目mall@v2.0升级使用sass语法。你要使用less？-->less的引用及公共变量的抽离 # 安装sass $ npm install node-sass sass-loader --save-dev 安装sass可能你会遇到点问题，老是安装不上？按下列步骤排查一下： 有可能是网络问题，使用淘宝镜像处理一下； mac用户sudo一下试试； 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的这部分内容，还是很方便的。 暂时就这么多吧，后面如果还有一些基础的样式要设置的话在补充到这里。 参考链接： 移动端1px解决方案 vue-cli css相关 normalize.css

本文章由javascript技术分享原创和收集