How to use both max-width and min-width

[ChetSocio]

Hello! I am new to react but I wanted to use both min width and max width .For example: a tablet screen that has min-width of 641px and max-width of 1023px . For mobile and desktop, I have done those successfully but am confused on how to apply both min-width and max-width together?

import React from 'react'
import { useMediaQuery } from 'react-responsive'
import MobHome from '../components/MobHome'
import Deskhome from '../components/Deskhome'

const Homepage = () => {
    const isDesktop = useMediaQuery({query: '(min-width: 1024px)'})
    const isTablet = useMediaQuery({ query: '(min-width: 641px)' })
    const isMobile = useMediaQuery({ query: '(max-width: 640px)'  })

    return (
    <div>
        {isDesktop && <Deskhome />}
        {isTablet && <p> You  have a huge screen</p>}
        {isMobile && <MobHome />}
    </div>)
}

export default Homepage

[pfischer1290]

use media query keyword 'and'

const isTablet = useMediaQuery({ query: '(min-width: 641px) and (max-width: 1023px)' })

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries?retiredLocale=de#combining_multiple_types_or_features

[yocontra]

I would recommend using the object syntax for the queries IMO { maxWidth: X, minWidth: Y } but yeah you can use and for this.