在vue-cli3使用sass(scss)定义的全局样式及变量 为统一风格及便于后续维护，在项目中常用的主色调、圆角、阴影相关的样式定义到一个全局变量文件中，常规的使用需要每个Vue组件中进行import,该操作会比较繁琐，经过了解后发现可以基于webpack的loader参数引入全局变量的方式来实现，相关实现过程如下所示：vue.config.jsmodule.exports = { // ... css: { // 为便于在Vue组件中使用，全局引入variables.scss中定义的变量 loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` } } } variables.css// base color $blue:#324157; $light-blue:#3A71A8; $red:#C03639; $pink: #E65D6E; $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; $theme: #004ca1; // ...vue 组件<style lang="scss" scoped> .btn-cursor { cursor:pointer; color: $theme } </style>

向客户解释为什么PC端网页要提供宽为 960或1200的设计稿 一个网页的尺寸和浏览器及显示器的尺寸大为相关，我们不可能满足所有用户的显示器尺寸，我们能做的是让绝大多数用户在访问网站时没有横向滚动条。需要统计客户的显示器分辨率，以百度近六个月的浏览器统计数据为例：1920x1080 44.5% 1366x768 10.19% 1440x900 8.27% 1536x864 7.22% 1600x900 6.43% 1280x720 4.31% 1024x768 3.27% 其他 15.81%从统计来看-要让绝大多数（约99%）的PC用户浏览网站没有横向滚动条，网页宽在1024以下，可以是960像素，960是2、3、4、5、6的公约数，980是2、4、5、6、7的公约数。-要页面美观大气，兼顾大部分（约80%）PC用户浏览网站没有横向滚动条，网页宽在1366以下为佳，可以是1170/1200/1260像素。1170是2、3、5、6的公约数。1200是2、3、4、5、6的公约数。1260是2、3、4、5、6、7的公约数。建议在不做响应式设计的情况下，提供宽1200分辨率的设计稿，并以像素为单位标注尺寸在做响应式设计的情况下，分别提供宽360（手机）、宽750（平板）、宽960（横向平板或窄屏PC）、宽1200（PC），四种尺寸下的设计稿。并以像素为单位标注尺寸以上宽指的是页面主体内容宽，在PS里设计时画布要更宽一些用于示意两侧留白效果 360/400 750/800 960/1260 1200/1600 1800/2400