నా డిజైన్ విధానాన్ని మార్చిన CSS Media Query
నేను గతంలో స్క్రీన్ సైజును బట్టి వెబ్సైట్లను డిజైన్ చేసేవాడిని.
వినియోగదారు ఫోన్ వాడుతున్నారా లేదా టాబ్లెట్ వాడుతున్నారా అని గుర్తించాల్సి ఉంటుందని నేను అనుకున్నాను. స్క్రీన్ ఎత్తు, వెడల్పు కంటే ఎక్కువగా ఉందో లేదో చూడటానికి ప్రయత్నించాను. కానీ ఇది కేవలం ఓరియంటేషన్ను (orientation) మాత్రమే తనిఖీ చేస్తుంది. ఇది డివైజ్ రకాన్ని (device type) గుర్తించలేదు.
నేను ఒక మెరుగైన మార్గాన్ని కనుగొన్నాను. ప్రజలు మీ సైట్తో ఎలా ఇంటరాక్ట్ అవుతున్నారో తనిఖీ చేయడానికి media queries ఉపయోగించండి.
(hover) క్వెరీ ఒక డివైజ్ ఎలిమెంట్స్ పైన హోవర్ (hover) చేయగలదా లేదా అని తనిఖీ చేస్తుంది.
మౌస్ లేదా ట్రాక్ప్యాడ్ ఉన్న డివైజ్ల కోసం @media (hover: hover) ఉపయోగించండి.
ఫోన్ల వంటి కేవలం టచ్ మాత్రమే ఉన్న డివైజ్ల కోసం @media (hover: none) ఉపయోగించండి.
ఇది మొబైల్లో హోవర్ సమస్యలను పరిష్కరించడానికి మీకు సహాయపడుతుంది. ఫోన్లో, హోవర్ రూల్స్ తరచుగా విఫలమవుతాయి లేదా వింతగా ప్రవర్తిస్తాయి. మొబైల్లో బటన్లను చూపించడానికి, కానీ డెస్క్టాప్లో యూజర్ హోవర్ చేసే వరకు వాటిని దాచడానికి మీరు కోడ్ రాయవచ్చు.
Tailwind దీనిని arbitrary variants ద్వారా సులభతరం చేస్తుంది:
మీరు (pointer) తో పాయింటర్ ప్రిసిషన్ (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 అని చూపిస్తుంది.
కేవలం స్క్రీన్ సైజుల కోసం మాత్రమే డిజైన్ చేయడం ఆపండి. వినియోగదారులు మీ ఇంటర్ఫేస్ను ఎలా తాకుతున్నారు లేదా క్లిక్ చేస్తున్నారు అనే దాని ఆధారంగా డిజైన్ చేయడం ప్రారంభించండి.