ayu*_*ain 3 frontend media-queries reactjs next.js
移动设备媒体查询 -
如何在next js 中应用媒体查询中全局应用媒体查询，以便它能够响应所有类型的移动设备。
我想在我的下一个网站中应用媒体查询，以便我可以使其响应，我该怎么做？
作为初学者 Web 开发人员。
生成代码示例 -
<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<style>
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
body {
background-color: red;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
body {
background-color: blue;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
body {
background-color: green;
}
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
body {
background-color: white;
}
}
</style>
</head>
<body style = "text-align:center;">
<h1>Generated Media Query </h1>
<h2>Media Query</h2>
</body>
</html>
如果您愿意使用第三方库，MUI 中的useMediaQuery正是您所需要的：
import * as React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery'
export default function SimpleMediaQuery()
{
const matches = useMediaQuery('(min-width:600px)')
return <span>{`(min-width:600px) matches: ${matches}`}</span>
}
有关如何使用它的更多示例，请参阅上面链接的文档。
如果您想避免使用另一个库，这里有一个简单的自定义挂钩：
export const useMediaQuery = (width) =>
{
const [targetReached, setTargetReached] = useState(false)
const updateTarget = useCallback((e) =>
{
if (e.matches) setTargetReached(true)
else setTargetReached(false)
}, [])
useEffect(() =>
{
const media = window.matchMedia(`(max-width: ${width}px)`)
media.addEventListener('change', updateTarget)
// Check on mount (callback is not called until a change occurs)
if (media.matches) setTargetReached(true)
return () => media.removeEventListener('change', updateTarget)
}, [])
return targetReached
}
用法：
// 600px
const matches = useMediaQuery(600)
| 归档时间： |
|
| 查看次数： |
16576 次 |
| 最近记录： |