先上成果
静态预览链接：https://xianjiezh.github.io/animating-pikachu/
动态预览链接： https://xianjiezh.github.io/animating-pikachu/animating-version/
代码链接： https://github.com/xianjiezh/animating-pikachu
实测静态链接可以兼容各种常见尺寸的屏幕
为什么说是使用Node 的scss？
答： 因为scss 和 sass 是 ruby 社区发明的工具，所以官方文档会要求装一个ruby，但是 ruby 是后端语言、甚至国内都用的很少，所以，有人把 scss 做出了一个 Node 的版本
几个表示长度的单位
px：像素，屏幕内最小的一个颜色块，具体的宽度由屏幕所决定，不同的屏幕上1个px所代表的宽度不同
em ：一般的说法是一个m的高度或者一个汉字的高度
vh、vw：viewport height，viewport width，视口的高度或宽度，100vh就等于视口的高度
rem ：root em ，根元素的font-size， 根元素就是html，在css里面指定html标签的font-size，就可以在后面使用rem作为单位，一个rem就等于html里面的font-size；如果没有在html里面指定rem，那么它默认是16px。
使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html{
font-size: 60px;
}
p{
font-size:2rem;
}
</style>
</head>
<body>
<p>韩韩</p>
</body>
</html>
这样，p标签里面的字体就是120px
需要注意，一般不要给字体设置小于12px；因为不同的浏览器有时它的字体最小最能设置到12px，小于12px会按12px算
rem做手机自适应方案
1. SCSS 是做什么的？
css这种编程语言 没有 if ... else 和 for 循环，函数等一般的编程语言都有的东西，只能想填空一样对盒子们进行排列顺序，SCSS是一些后端rails（一个后端框架）社区发明的比较写css的方法，在这里面，可以实现其他正常的编程语言都有的东西
2. 怎么使用
如果搜索中文的资料，那么，可能是无法学会SCSS的，因为大部分中文资料都是过时的，他们甚至会让你去安装ruby（一种后端语言），这里我使用的是node 的SCSS
只需要几句命令就可以了
步骤如下：
在命令行里面（cmd、gitbash或者其他系统自带的终端）依次输入一下命令：
-
* npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
因为国内的众所周知的原因，连接到外网时速度会比较慢，这句命令是让下载 SCSS的地址改变到淘宝上 -
touch ~/.bashrc
~/.bashrc 是设置命令行系统的文件，生成这样的一个文件 - 输入
start ~/.bashrc（window下）或open ~/.bashrc（其他正常系统下），然后选择一款编辑器打开，输入export SASS_BINARY_SITE="export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass](https://npm.taobao.org/mirrors/node-sass)"， 让SCSS的源也指向淘宝 -
source ~/.bashrc，让刚才的改动生效 -
npm i -g node-sass，安装 node-sass， 会自带scss、或者是scss是sass的升级版 - 可以使用了 ， 新建两个文件 style.scss 和style.css，我们把代码写在 style.scss 里面，让工具翻译写的scss 格式的文件，然后 输出成css文件
- 命令是
node-sass style.scss style.css, 前面是scss文件，后面是翻译出来的css文件，node-sass style.scss style.css可以随时监听这个scss文件的改动
3. SCSS代码的格式
如下
$designWidth : 380;
@function px( $px ){
@return $px / $designWidth * 10 + rem;
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
background-color: #ffe600;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.main-wrapper{
width: 100%;
height: px(200);
position: relative;
.nose{
width: 0;
height: 0;
border-radius: 50%;
border: px(13) solid red;
border-width: px(13) px(14);
border-color: black transparent transparent transparent;
position: absolute;
top: px(20);
left: 50%;
transform: translateX(-50%)
}
// 省略 n 多代码
}
可以看到，这个会让css的代码更有规律，在维护的时候不需要到处找选择器了，甚至，它有点儿像组件的写法，每个section之可以是独立的
并且在上面有一个函数来根据设计稿给定的尺寸生成 rem 值，这个就是自动适应不同屏幕的原理
此外，在使用时，需要HTML 文件里面写这样的代码
<script>
let pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth / 10 + 'px;}</style>')
</script>
这段代码是获取屏幕的宽度，并且将其缩小成合适大小 生成一个 rem 的值，scss文件里面的 px 函数里面的px函数里面的 * 10 跟这边的 / 10 是可以抵消的
为什么两边都要用10来抵消一下，直接用原来的值不行吗？
答：不行，因为有的结果算出来是 一个小数，比如0.123px，那么，浏览器会自动忽略有的数，造成误差，除以10可以减少这样的误差
只要上面的命令行在工作中，每次写完scss里面的代码，保存一下，就会自动更新 css 里面的代码
在测试pc的兼容时，发现图片严重变大，原因是一开始是根据手机端做的页面，手机端是 屏幕宽度比 高度 小很多，而pc端是高度比宽度小很多，后来在script标签里面的代码上加了一写代码就可以了
<script>
let pageWidth = window.innerWidth
if(pageWidth > 800){
pageWidth = 800
}
document.write('<style>html{font-size:' + pageWidth / 10 + 'px;}</style>')
</script>
当屏幕宽度大于800像素时，获取的pageWidth 就一直等于 800，这样可以兼容常见的笔记本的屏幕
此外，手机端最好使用border-box，因为这样在算宽度的时候就不用担心 因为border和padding的宽度而反复计算了，只需要计算某个元素总体的宽度就行
网友评论