css样式随网页宽度变化而变化的实现

首次编辑：24/5/26/20:48
最后编辑：24/5/26/21:10

引子

一开始接触编程最想做的事情之一就是搭建自己的个人网站，所以很早就学了前端。不过涉猎了一些之后并没有过多钻研，所以有些技术还是不知道怎么实现。
现在笔记越记越多了，用markdown记的，却没有用什么markdown笔记软件，因为各类软件的功能总是不尽人意。直到现在也还是用代码编辑器写markdown，虽然写起来没什么问题，但回头想要翻阅却有诸多不便。

于是制作博客系统的需求越来越强烈，开始想方法搭建个人博客了。

找了一些开源项目，由于项目都比较庞大，想要使用就得牺牲个性化，想要足够个性化又得在开源项目上改很久，真是两难。

最后改着改着还是研究起了一些功能的实现，比如本篇的主题：让html标签的显示根据网页宽度的变化而变化——实际上就是在css上动手脚。很幸运这个功能没有想象中的那么简单——也许是因为html5+css3的加持。

实现

实现这个功能需要@media的帮助：

/* 网页全屏时的样式 */
body {
  font-size: 26px;
}

/* 网页宽度小于768像素时的样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

在这个代码中，当网页全屏时，字体大小为26px；而当网页宽度小于768像素时，由@media(max-width: 768px)包含的样式代码会被激活，于是字体大小变为14px。
当然，如果还需要其它标签需要随网页宽度变化而不同，也可以一起写在由@media(max-width: 768px)包含的代码块中。

加点平滑动画

效果是实现了，当只要网页宽度一小于768px，字体就会突然变小。这可能不太优雅，于是我们可以加点平滑：

body {
  font-size: 26px;
  transition: all 0.25s ease 0.1s;  /* 使得字体大小的切换在0.25s内完成 */
}

/* 网页宽度小于768像素时的样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

熟悉transition的自然就懂了。这个transition只能加在上面那个样式中，如果放在@media所引导的块中，效果会减半！（你可以动手试试）

评论