[Feature]页面自适应

[RunlingDev]

由于这个项目刚开始只是为了班级课前唱歌的资源--即使现在也主要是为了它--这导致没有很好的考虑适配。

然而随着代码的一步步完善，这慢慢成为通用的简单的歌单展示器的模板（好吧我也不知道怎么定位它）。

如此，最好在闲暇之时考虑适配性。

Feature

• 根据页面高度自动计算每栏应该生成的曲目多少（现在私用方案是两首固定曲目分居左右栏第一行，然后班级平台高度剩下放11首刚好--虽然这也是常用宽高度）最近时间比较紧，什么时候有闲了再研究研究吧。

• 本地运行：这是个好问题。作为歌单的展示框，这很可能被clone下来，单纯的本地运行（也能更好的自定义），但这有一个十分致命的问题：无论是fetch还是xmlhttprequest,依据那个该*的CORS policy，都不允许使用file协议，这就导致本地歌单很难实现，json还要自己上传到公网.....这对于这个项目迁移运用会有很大障碍，目前也没想好怎么解决。

说实话，对于本地运行这个问题，我的解决方案有二：

一个是chrome启动赋予--allow-file-access-from-files参数，这很好，但是如果从文件启动呢？

一个就是把配置文件整上GitHub--这当然是个方法，file://不给用，http://总行吧，用raw，刚刚好，就是--待会版权问题什么的比较难搞，而且还要公开（即使也没人看）。

其实我能够理解这个政策的原因：fetch、httprequest，主要都不是我这种小儿科的用法，直接get网站数据，不用本地，可以有效避免文件泄密以及安全问题。本地file协议很容易被更改json内容，如此，网站很可能有漏洞。

from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: 
http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

[RunlingDev]

另外一点，播放器只有视频播放没有音频+滚动歌词的方案：这个也是由于需求，可以实现（之前有一个版本为了一首没有找到mv的歌单独搞了个播放器，不过歌词懒得搞了，可以回去看看551769e）,但是懒得搞了

[RunlingDev]

基本解决自适应问题，除了那个烦人的本地文件--它甚至还影响与网易云的配合使用，因为不允许同时访问本地+网络。动手能力强的话自行本地跑node也是个好方法。

server.js

const http = require('http');
const fs = require('fs');

const PORT = 3000; // 设置端口号

const server = http.createServer((req, res) => {
  // 设置响应头,指定返回 JSON 数据
  res.setHeader('Content-Type', 'application/json');

  // 读取本地 a.json 文件
  fs.readFile('a.json', 'utf8', (err, data) => {
    if (err) {
      res.statusCode = 500;
      res.end(JSON.stringify({ error: '读取文件失败' }));
      return;
    }

    // 将 JSON 数据发送回客户端
    res.end(data);
  });
});

server.listen(PORT, () => {
  console.log(`服务器已启动,监听端口: ${PORT}`);
});