ਕਿਵੇਂ ਬਣਾਉਣਾ: ਆਮ ਉਪਕਰਣ ਬੈਕਟਨਪੁਇੰਟ

ਸਿੱਖੋ ਕਿ ਕਿਵੇਂ ਮੀਡੀਆ ਕਿਊਰੀ ਰਾਹੀਂ ਆਮ ਉਪਕਰਣ ਬੈਕਟਨਪੁਇੰਟਾਂ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਹੈ。

ਆਮ ਉਪਕਰਣ ਬੈਕਟਨਪੁਇੰਟ

ਬਹੁਤ ਸਾਰੇ ਵੱਡੇ ਅਤੇ ਛੋਟੇ ਸਕਰੀਨ ਅਤੇ ਉਪਕਰਣ ਹਨ, ਇਸ ਲਈ ਹਰ ਉਪਕਰਣ ਲਈ ਸਹੀ ਬੈਕਟਨਪੁਇੰਟ ਬਣਾਉਣਾ ਮੁਸ਼ਕਿਲ ਹੈ。

ਕੰਮ ਸਰਲ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਪੰਜ ਸਭ ਤੋਂ ਆਮ ਸਮੂਹਾਂ ਨੂੰ ਸਥਾਨਿਤ ਕਰ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

/* ਛੋਟੇ ਉਪਕਰਣ (ਮੋਬਾਈਲ, 600px ਅਤੇ ਘੱਟ) */
@media only screen and (max-width: 600px) {...}
/* ਛੋਟੇ ਉਪਕਰਣ (ਪੱਛਮੀ ਪੈਡ ਅਤੇ ਵੱਡੇ ਮੋਬਾਈਲ, 600px ਅਤੇ ਉੱਪਰ) */
@media only screen and (min-width: 600px) {...}
/* ਮੱਧ ਉਪਕਰਣ (ਪੱਛਮੀ ਪੈਡ, 768px ਅਤੇ ਉੱਪਰ) */
@media only screen and (min-width: 768px) {...}
/* ਵੱਡੇ ਉਪਕਰਣ (ਲੈਪਟਾਪ/ਡੈਸਕਟਾਪ, 992px ਅਤੇ ਉੱਪਰ) */
@media only screen and (min-width: 992px) {...}
/* ਬਹੁਤ ਵੱਡੇ ਉਪਕਰਣ (ਵੱਡੇ ਲੈਪਟਾਪ ਅਤੇ ਡੈਸਕਟਾਪ, 1200px ਅਤੇ ਉੱਪਰ) */
@media only screen and (min-width: 1200px) {...}

ਆਪਣੇ ਹੀ ਮੰਗਣ ਲਈ ਟ੍ਰਾਇਲ

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਰੀਅਲ:CSS 媒体查询

ਟੂਰੀਅਲ:ਸੀਐੱਸਐੱਸ ਮੀਡੀਆ ਕਿਊਰੀ ਉਦਾਹਰਣ

ਸੰਦਰਭ ਮੈਨੂਅਲ:CSS @media 规则

ਟੂਰੀਅਲ:ਮੀਡੀਆ ਕਿਊਰੀ ਰਾਹੀਂ ਰੈਸਪੋਨਸਿਵ ਵੈੱਬ ਡਿਜਾਇਨ ਲਾਗੂ ਕਰਨਾ

ਸੰਦਰਭ ਮੈਨੂਅਲ:ਜਾਵਾਸਕ੍ਰਿਪਟ window.matchMedia() ਮੈਥੋਡ