diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/DefectingCat.github.io.iml b/.idea/DefectingCat.github.io.iml
new file mode 100644
index 0000000..0c8867d
--- /dev/null
+++ b/.idea/DefectingCat.github.io.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..f325d5a
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/DefectingCat.github.io.iml" filepath="$PROJECT_DIR$/.idea/DefectingCat.github.io.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/pages/page/[num].tsx b/pages/page/[num].tsx
index 98e06a3..7d062d7 100644
--- a/pages/page/[num].tsx
+++ b/pages/page/[num].tsx
@@ -16,9 +16,9 @@ export function getStaticPaths() {
   };
 }
 
-export const getStaticProps: GetStaticProps<
-  { num: string | undefined } & PagingData
-> = ({ params }) => {
+export const getStaticProps: GetStaticProps<{ num?: string } & PagingData> = ({
+  params,
+}) => {
   const num = params?.num?.toString();
 
   return {
diff --git a/public/images/响应式Web-以移动端优先构建的响应式网页/Grid1.png b/public/images/响应式Web-以移动端优先构建的响应式网页/Grid1.png
new file mode 100644
index 0000000..5835162
Binary files /dev/null and b/public/images/响应式Web-以移动端优先构建的响应式网页/Grid1.png differ
diff --git a/public/images/响应式Web-以移动端优先构建的响应式网页/Grid2.png b/public/images/响应式Web-以移动端优先构建的响应式网页/Grid2.png
new file mode 100644
index 0000000..0553a3a
Binary files /dev/null and b/public/images/响应式Web-以移动端优先构建的响应式网页/Grid2.png differ
diff --git a/public/images/响应式Web-以移动端优先构建的响应式网页/Grid3.png b/public/images/响应式Web-以移动端优先构建的响应式网页/Grid3.png
new file mode 100644
index 0000000..b8f1a07
Binary files /dev/null and b/public/images/响应式Web-以移动端优先构建的响应式网页/Grid3.png differ
diff --git a/public/md/响应式Web-以移动端优先构建的响应式网页.md b/public/md/响应式Web-以移动端优先构建的响应式网页.md
new file mode 100644
index 0000000..1ead6aa
--- /dev/null
+++ b/public/md/响应式Web-以移动端优先构建的响应式网页.md
@@ -0,0 +1,30 @@
+响应式网页一直是人们所追求的目标，从早期的为移动端和 PC 端各准备一个网站的方式，到现在的利用 CSS 媒体查询已经各种奇淫技巧来实现的真正的响应式网页。期间经历了很多变化，也实现了很多前所未有的效果。也有很多 Best practice 供我们学习和使用。
+
+## 响应式布局
+
+所谓的响应式布局就是根据浏览器视口的宽度来调整文档的整体布局。响应式的页面主要还是移动端的崛起，和 PC 普遍的 `16:9` 等横屏不同，移动端通常都是以 `9:16` 等比例的竖屏。这就导致了整体的布局必然有很大差距，也就催生了响应式布局的革命。
+
+随着时代的进步，CSS 媒体查询成为了我们设计响应式布局的主要工具之一。它也不负众望，为我们带来了体验极其良好的响应式网页。
+
+所谓媒体查询是 CSS 的一种语法，它类似于条件语句，可以根据特点条件来实现特定的样式表。而它实现响应式主要的条件便是根据浏览器的视口宽度来实现特定的样式。
+
+例如常见的 Grid 布局等：
+
+```css
+.grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+@media (min-width: 1280px)
+.xl\:grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+```
+
+![Grid1.png](C:\Users\xfy\Git\DefectingCat.github.io\public\images\响应式Web-以移动端优先构建的响应式网页\Grid1.png)
+
+![Grid2.png](C:\Users\xfy\Git\DefectingCat.github.io\public\images\响应式Web-以移动端优先构建的响应式网页\Grid2.png)
+
+![Grid3.png](C:\Users\xfy\Git\DefectingCat.github.io\public\images\响应式Web-以移动端优先构建的响应式网页\Grid3.png)
+
+
diff --git a/public/md/响应式Web-以移动端优先构建的响应式菜单.md b/public/md/响应式Web-以移动端优先构建的响应式菜单.md
deleted file mode 100644
index 8b13789..0000000
--- a/public/md/响应式Web-以移动端优先构建的响应式菜单.md
+++ /dev/null
@@ -1 +0,0 @@
-