diff --git a/components/NavBar.tsx b/components/NavBar.tsx index e64f9ad..755f396 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -104,7 +104,7 @@ const MenuList: FC = 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); diff --git a/components/post/PostIframe.tsx b/components/post/PostIframe.tsx index 5776800..befba0e 100644 --- a/components/post/PostIframe.tsx +++ b/components/post/PostIframe.tsx @@ -8,7 +8,7 @@ interface Props { const PostIframe: FC = ({ 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 = ({ src, children }) => { filter={blur} w="100%" transitionDuration="slower" - ratio={isLargerThan768 ? 16 / 9 : 1} + ratio={isLargerThan640 ? 16 / 9 : 4 / 3} > = ({ src }) => { const { initSrc, blur, targetRef } = useLazyLoad(src, '20px'); - const [isLargerThan768] = useMediaQuery('(min-width: 768px)'); + const [isLargerThan640] = useMediaQuery('(min-width: 640px)'); return ( <> - + = ({ src }) => { filter={blur} transitionDuration="slower" alt="Post image" - w="100%" + h="100%" + objectFit="cover" /> diff --git a/public/md/响应式Web-以移动端优先构建的响应式菜单.md b/public/md/响应式Web-以移动端优先构建的响应式菜单.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/public/md/响应式Web-以移动端优先构建的响应式菜单.md @@ -0,0 +1 @@ +