thatway的博客

stylus是一个css预处理器，比较流行的css预处理器有sass、less、stylus，它们都一样，都是css的语法糖，可以使用变量，可以有简单的逻辑，使css的开发效率更高，更易维护。stylus来自node社区，它的语法兼容性强，个人觉得也更加简洁，选择在vue中使用。安装stylus以webpack模板为例，在webpack的loader配置中，已经做好了stylus的兼容，

SVG与字体图标SVG图片是矢量图片，不会随着图片的伸缩而影响质量，通常把只有一种颜色的图标做成SVG，通过SVG生成字体图标，放到项目中使用。https://icomoon.io/是一个比较快捷的生成字体图标的线上工具，进入主页后，点击右上角IconMoon App按钮，进入图标制作页面。 页面上有很多官方提供的默认图标。点击左上角“Import Icons”可以导入自己的svg。

flex布局是css3中的重要布局方式，称为“弹性布局”，每次想到它主要是遇到元素垂直居中、元素宽高自适应的问题，这些问题在flex中都能过简单设置就解决，它更像是原生APP中的布局操作，布局不必写N多的盒模型代码来实现，指哪就打哪。 末尾附上阮一峰大神的flex介绍，怎么用看这篇文章就可以了。flex也是ReactNative中的布局方式。 flex分为容器和项目，项目存在于某个容

DPR dpr问题是移动端web开发上需要注意的问题，用大白话说就是，代码中所设置的像素值实际上是虚拟像素，手机屏幕上的像素实际为物理像素，原始的手机，虚拟像素与物理像素是1:1覆盖的，但随着移动端屏幕的技术发展，屏幕尺寸不变的情况下，密度却增大了，就会出现逻辑1像素覆盖了多个物理像素，就造成了不清晰的问题。 dpr（devicePixelRatio）就是即物理像素/逻辑像素

sticky-footer是css中的一个经典问题： 当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到。 而当页面内容小于屏幕高度，页脚模块会固定在屏幕底部，就像是底边距为零的固定定位。html:div class="detailWrapper" v-show="detailShow"> div class="sticky-box clearfi