前言

这几天搭建博客，顺便做了一些美化，但我是一个追求尽善尽美的人，有些地方看着不舒服心里就怪难受的，这要是我去做美工前端不得叼死我╮(╯▽╰)╭

问题

为了使背景的颜色和特效能够直观无碍地展现出来，我设置了卡片的半透明，但是我发现在移动端下透明会使目录栏的内容和背景重叠，导致看不清目录，就像以下这样：

解决

  • 通过查找度娘，我发现可以利用@media screen实现CSS网页布局的自适应

    所以我想出的解决方案是令目录卡片在移动端的时候不透明，在桌面端的时候才透明。

  • 由于我使用的主题CSS采用了Stylus，查了一下API文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media screen and (min-width: 600px)
        padding 20px

    转换为：  
     
    @media screen and (min-width: 600px) {
      .widget {
        padding: 20px;
      }
    }

  • 接着找到需要修改的文件，先从页面入手

    在mac文件管理器搜这个id，可以直接找到相关文档，不得不说mac这点做得比隔壁win好太多了

  • 代码如下:

    1
    2
    3
    #card-toc
      @media screen and (max-width: 900px)
        background: rgb(255,255,255)

结果

快乐(*^▽^*)