ਓਹ CSS Media Query ਜਿਸ ਨੇ ਮੇਰੇ ਡਿਜ਼ਾਈਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਬਦਲ ਦਿੱਤਾ
ਮੈਂ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰ (size) ਨੂੰ ਚੈੱਕ ਕਰਕੇ ਵੈੱਬਸਾਈਟਾਂ ਡਿਜ਼ਾਈਨ ਕਰਦਾ ਸੀ।
ਮੈਨੂੰ ਲੱਗਦਾ ਸੀ ਕਿ ਮੈਨੂੰ ਇਹ ਪਤਾ ਲਗਾਉਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਯੂਜ਼ਰ ਫ਼ੋਨ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ ਜਾਂ ਟੈਬਲੇਟ ਦੀ। ਮੈਂ ਇਹ ਚੈੱਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਕਿ ਕੀ ਸਕ੍ਰੀਨ ਦੀ ਉਚਾਈ (height) ਚੌੜਾਈ (width) ਨਾਲੋਂ ਵੱਧ ਹੈ। ਇਹ ਸਿਰਫ਼ ਓਰੀਐਂਟੇਸ਼ਨ (orientation) ਨੂੰ ਚੈੱਕ ਕਰਦਾ ਸੀ। ਇਸ ਨੇ ਡਿਵਾਈਸ ਦੀ ਕਿਸਮ (device type) ਨੂੰ ਚੈੱਕ ਨਹੀਂ ਕੀਤਾ।
ਮੈਨੂੰ ਇੱਕ ਬਿਹਤਰ ਤਰੀਕਾ ਮਿਲਿਆ। ਇਹ ਦੇਖਣ ਲਈ media queries ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਿ ਲੋਕ ਤੁਹਾਡੀ ਸਾਈਟ ਨਾਲ ਕਿਵੇਂ ਇੰਟਰੈਕਟ (interact) ਕਰਦੇ ਹਨ।
(hover) ਕੁਐਰੀ (query) ਇਹ ਚੈੱਕ ਕਰਦੀ ਹੈ ਕਿ ਕੀ ਕੋਈ ਡਿਵਾਈਸ ਐਲੀਮੈਂਟਸ (elements) ਦੇ ਉੱਪਰ ਹੋਵਰ (hover) ਕਰ ਸਕਦੀ ਹੈ।
ਮਾਊਸ ਜਾਂ ਟ੍ਰੈਕਪੈਡ ਵਾਲੇ ਡਿਵਾਈਸਾਂ ਲਈ @media (hover: hover) ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਫ਼ੋਨ ਵਰਗੇ ਸਿਰਫ਼ ਟੱਚ ਵਾਲੇ ਡਿਵਾਈਸਾਂ ਲਈ @media (hover: none) ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਹ ਤੁਹਾਨੂੰ ਮੋਬਾਈਲ 'ਤੇ ਹੋਵਰ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਸੁਲਝਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਫ਼ੋਨ 'ਤੇ, ਹੋਵਰ ਨਿਯਮ ਅਕਸਰ ਅਸਫਲ ਹੋ ਜਾਂਦੇ ਹਨ ਜਾਂ ਅਜੀਬ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਮੋਬਾਈਲ 'ਤੇ ਬਟਨ ਦਿਖਾਉਣ ਲਈ ਪਰ ਡੈਸਕਟਾਪ 'ਤੇ ਉਹਨਾਂ ਨੂੰ ਉਦੋਂ ਤੱਕ ਲੁਕਾਉਣ ਲਈ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜਦੋਂ ਤੱਕ ਯੂਜ਼ਰ ਹੋਵਰ ਨਹੀਂ ਕਰਦਾ।
Tailwind ਇਸ ਨੂੰ arbitrary variants ਨਾਲ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ:
ਤੁਸੀਂ (pointer) ਨਾਲ ਪੁਆਇੰਟਰ ਦੀ ਸ਼ੁੱਧਤਾ (precision) ਵੀ ਚੈੱਕ ਕਰ ਸਕਦੇ ਹੋ।
• Mouse: hover ਅਤੇ fine pointer • Trackpad: hover ਅਤੇ fine pointer • Finger touch: no hover ਅਤੇ coarse pointer • Stylus: ਆਮ ਤੌਰ 'ਤੇ hover ਅਤੇ fine pointer
ਜੇਕਰ ਤੁਸੀਂ ਸਿਰਫ਼ ਮੁੱਖ ਡਿਵਾਈਸ ਦੀ ਬਜਾਏ ਹਰ ਇਨਪੁਟ ਡਿਵਾਈਸ ਨੂੰ ਚੈੱਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ:
• @media (any-hover: hover) • @media (any-pointer: fine)
ਮਾਊਸ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਟੈਬਲੇਟ ਆਪਣੇ ਪ੍ਰਾਇਮਰੀ ਇਨਪੁਟ ਲਈ hover: none ਦੱਸ ਸਕਦਾ ਹੈ। ਪਰ ਇਹ any-hover: hover ਦੱਸੇਗਾ ਕਿਉਂਕਿ ਉੱਥੇ ਮਾਊਸ ਮੌਜੂਦ ਹੈ।
ਸਿਰਫ਼ ਸਕ੍ਰੀਨ ਦੇ ਆਕਾਰਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਕਰਨਾ ਬੰਦ ਕਰੋ। ਇਸ ਗੱਲ ਲਈ ਡਿਜ਼ਾਈਨ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ ਕਿ ਯੂਜ਼ਰ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਨੂੰ ਕਿਵੇਂ ਟੱਚ ਜਾਂ ਕਲਿੱਕ ਕਰਦੇ ਹਨ।