白抹灰

当用户点击菜单按钮，在弹出导航栏的同时，汉堡形状的按钮也会动画渐变成叉号。再次对其点击时，导航栏收回，按钮也恢复原样。关于汉堡菜单，虽然 GitHub 上已经有相关的库 hamburgers，但因为我使用的 nuxt 框架采用的是 rem 布局，对于 px 到 rem 的转换让我实在头疼。再三思量之下，还是决定自己手动模仿一个出来。具体实现效果如下动图。

在按设计稿搭建项目页面时，碰到了一处内容呈现方式如下图所示的元素。文字在菱形边框内居中摆放的布局看似简单，却让我陷入了长时间的束手无策。如果只是通过 transform 将一个 div 旋转 45deg，其内的文字也会跟着转动，这显然不符合要求。

（一）响应式界面

1. 什么是响应式设计

响应式布局

响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是”Content is like water”，翻译成中文便是”如果将屏幕看作容器，那么内容就像水一样”。

BFC 到底是什么东西

BFC 全称：Block Formatting Context，名为 “块级格式化上下文”。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

原理：The Open Graph protocol (ogp.me)

Sass 的控制命令可以让你在 @mixin 和 @function 中实现条件判断和循环逻辑，是编写可复用、可配置的 Sass 库的基础。掌握这些指令，才能真正写出灵活健壮的 SCSS 代码。

Sass 提供了三种代码复用机制：混合宏（Mixin）、继承/占位符（@extend / %placeholder） 和 函数（@function）。理解它们的区别和适用场景，是写出高质量、可维护 SCSS 的关键。

一、什么是 Tailwind CSS

Tailwind CSS 是一个工具类优先（Utility-First） 的 CSS 框架。与 Bootstrap、Element UI 等传统框架不同，它不提供预定义的组件类（如 .btn、.card），而是提供数百个原子化的工具类，让开发者直接在 HTML 中组合样式。

引言

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是 PC 端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell 台式宽屏 (1440 X 900)。

一、git

• git fetch 从远程仓库获取最新的代码，但不会自动合并到本地代码
• git pull git fetch + git merge
• git pull --rebase git fetch + git rebase
• git branch -a 查看所有分支
• git branch feature 创建名为 feature 的本地分支
• git checkout feature 切换到 feature 分支。切换到远程分支时，要 pull 更新代码
• git checkout -b feature 创建并切换到 feature 分支
  阅读全文 »