Update media query to 640px

components/NavBar.tsx

@@ -104,7 +104,7 @@ const MenuList: FC<MenuListProps> = React.memo(function MenuList({
 const NavBar: FC = () => {
   const router = useRouter();
 
-  const [isLargerThan768] = useMediaQuery('(min-width: 768px)');
+  const [isLargerThan640] = useMediaQuery('(min-width: 640px)');
   // Menu toggle
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
   // Modal toggle
@@ -125,7 +125,7 @@ const NavBar: FC = () => {
       e.preventDefault();
 
       if (path) {
-        !isLargerThan768 &&
+        !isLargerThan640 &&
           // Click the animate icon.
           (iconRef.current?.children[0] as HTMLDivElement).click();
         router.push(path);

components/post/PostIframe.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const PostIframe: FC<Props> = ({ src, children }) => {
   const { initSrc, blur, targetRef } = useLazyLoad(src, '8px');
-  const [isLargerThan768] = useMediaQuery('(min-width: 768px)');
+  const [isLargerThan640] = useMediaQuery('(min-width: 640px)');
 
   return (
     <>
@@ -16,7 +16,7 @@ const PostIframe: FC<Props> = ({ src, children }) => {
         filter={blur}
         w="100%"
         transitionDuration="slower"
-        ratio={isLargerThan768 ? 16 / 9 : 1}
+        ratio={isLargerThan640 ? 16 / 9 : 4 / 3}
       >
         <Box
           as="iframe"

components/post/PostImage.tsx

@@ -10,11 +10,11 @@ interface Props {
 
 const PostImage: FC<Props> = ({ src }) => {
   const { initSrc, blur, targetRef } = useLazyLoad(src, '20px');
-  const [isLargerThan768] = useMediaQuery('(min-width: 768px)');
+  const [isLargerThan640] = useMediaQuery('(min-width: 640px)');
 
   return (
     <>
-      <Zoom wrapElement="picture" zoomMargin={isLargerThan768 ? 300 : 0}>
+      <Zoom wrapElement="picture" zoomMargin={isLargerThan640 ? 300 : 0}>
         <Image
           ref={targetRef}
           borderRadius="10px"
@@ -22,7 +22,8 @@ const PostImage: FC<Props> = ({ src }) => {
           filter={blur}
           transitionDuration="slower"
           alt="Post image"
-          w="100%"
+          h="100%"
+          objectFit="cover"
         />
       </Zoom>
     </>

public/md/响应式Web-以移动端优先构建的响应式菜单.md

@@ -0,0 +1 @@
+