【fqq系列】关于CSS

[wscj]

本项目作为一个移动端的app，为了适应各种大小不一的屏幕，CSS的长度单位采用rem。

rem是一种相对的长度单位，其实际大小与html根节点的font-size保持相等。

自己折腾的项目，自然没有设计稿，我就假装有设计稿。

关于长度的设计

现在很多安卓手机的逻辑像素是360，高与宽比是16:9，所以我把设计稿的分辨率定为1920*1080，因为我的手机也是这个分辨率，这样在手机上直接截屏出来的图片也是这个分辨率，可直接作为设计稿。这种情况相当于拿9个设备物理像素作为一个CSS的px像素。很多UI设计师会把设计稿定为1280*720，这样是拿4个设备物理像素作为一个CSS的px像素。这方面相关的知识可以看看这篇文章。

由于rem是个相对的单位，所以最好在加载CSS之前就计算出html的font-size大小，请看index.html文件里的这段代码：

window.onresize = function () {
    document.querySelector("html").style.fontSize = document.documentElement.clientWidth / 360 * 312.5 + "%";
}
window.onresize();

这里有以下要点：

• html默认的font-size为16px，16px * 312.5% = 50px，这是逻辑像素，对应设计稿的150px
• document.documentElement.clientWidth是设备的逻辑像素宽度，除以360得到的就是每个逻辑像素的宽度

单位换算

使用rem作为单位，需要对设计稿的px做换算，手动计算显得比较麻烦，网上有一种方案是引入sass或less，写一个函数来做换算，这方法用在本项目上也挺简单，便采用了。新建一个sass的文件./src/assets/sass/function.scss，在里面定义一个换算的函数：

@function px2rem($px, $base-font-size: 150px) {
    @return ($px / $base-font-size) * 1rem;
}

引用的时候，在组件的样式标签加入lang="scss"，然后导入function.scss文件，如下：

<style lang="scss" scoped>
    @import '../../assets/sass/function';
    .test {
        width: px2rem(150px);
        height: px2rem(90px);
    }
</style>

注意：px2rem是sass的函数，不能在calc()里使用

Sublime Text 高亮配置

习惯了使用sublime编辑器，要让.vue文件在sublime里显示高亮，首先得装个Vue Syntax Highlight插件，这样.vue文件里的html与js还有css代码都能显示高亮，但sass的代码还得再装个SCSS高亮插件