ನನ್ನ ವಿನ್ಯಾಸದ ವಿಧಾನವನ್ನೇ ಬದಲಿಸಿದ CSS Media Query
ನಾನು ಮೊದಲು ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು (screen size) ಪರಿಶೀಲಿಸುವ ಮೂಲಕ ವೆಬ್ಸೈಟ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುತ್ತಿದ್ದೆ.
ಬಳಕೆದಾರರು ಫೋನ್ ಬಳಸುತ್ತಿದ್ದಾರೆಯೇ ಅಥವಾ ಟ್ಯಾಬ್ಲೆಟ್ ಬಳಸುತ್ತಿದ್ದಾರೆಯೇ ಎಂದು ಪತ್ತೆಹಚ್ಚಬೇಕೆಂದು ನಾನು ಭಾವಿಸಿದ್ದೆ. ಸ್ಕ್ರೀನ್ ಎತ್ತರವು ಅಗಲಕ್ಕಿಂತ ಹೆಚ್ಚಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನಾನು ಪ್ರಯತ್ನಿಸಿದೆ. ಇದು ಕೇವಲ ಓರಿಯಂಟೇಶನ್ (orientation) ಅನ್ನು ಮಾತ್ರ ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದು ಸಾಧನದ ಪ್ರಕಾರವನ್ನು (device type) ಪರಿಶೀಲಿಸುವುದಿಲ್ಲ.
ನಾನು ಒಂದು ಉತ್ತಮ ಮಾರ್ಗವನ್ನು ಕಂಡುಕೊಂಡೆ. ಜನರು ನಿಮ್ಮ ಸೈಟ್ನೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತಾರೆ (interact) ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಲು media queries ಬಳಸಿ.
(hover) ಕ್ವೆರಿಯು ಸಾಧನವು ಎಲಿಮೆಂಟ್ಗಳ ಮೇಲೆ ಹವರ್ (hover) ಮಾಡಬಲ್ಲದೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
ಮೌಸ್ ಅಥವಾ ಟ್ರ್ಯಾಕ್ಪ್ಯಾಡ್ ಇರುವ ಸಾಧನಗಳಿಗಾಗಿ @media (hover: hover) ಬಳಸಿ.
ಫೋನ್ಗಳಂತಹ ಕೇವಲ ಟಚ್ (touch-only) ಸಾಧನಗಳಿಗಾಗಿ @media (hover: none) ಬಳಸಿ.
ಇದು ಮೊಬೈಲ್ನಲ್ಲಿ ಹವರ್ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಫೋನ್ನಲ್ಲಿ, ಹವರ್ ನಿಯಮಗಳು (hover rules) ಹೆಚ್ಚಾಗಿ ವಿಫಲವಾಗುತ್ತವೆ ಅಥವಾ ವಿಚಿತ್ರವಾಗಿ ವರ್ತಿಸುತ್ತವೆ. ಮೊಬೈಲ್ನಲ್ಲಿ ಬಟನ್ಗಳನ್ನು ತೋರಿಸಲು ಮತ್ತು ಡೆಸ್ಕ್ಟಾಪ್ನಲ್ಲಿ ಬಳಕೆದಾರರು ಹವರ್ ಮಾಡುವವರೆಗೆ ಅವುಗಳನ್ನು ಮರೆಮಾಚಲು ನೀವು ಕೋಡ್ ಬರೆಯಬಹುದು.
Tailwind ಇದನ್ನು arbitrary variants ಮೂಲಕ ಸುಲಭಗೊಳಿಸುತ್ತದೆ:
ನೀವು (pointer) ಮೂಲಕ ಪಾಯಿಂಟರ್ ನಿಖರತೆಯನ್ನು (pointer precision) ಸಹ ಪರಿಶೀಲಿಸಬಹುದು.
• ಮೌಸ್: hover ಮತ್ತು fine pointer • ಟ್ರ್ಯಾಕ್ಪ್ಯಾಡ್: hover ಮತ್ತು fine pointer • ಬೆರಳಿನ ಸ್ಪರ್ಶ (Finger touch): no hover ಮತ್ತು coarse pointer • ಸ್ಟೈಲಸ್ (Stylus): ಸಾಮಾನ್ಯವಾಗಿ hover ಮತ್ತು fine pointer
ನೀವು ಕೇವಲ ಮುಖ್ಯ ಸಾಧನವನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಪ್ರತಿಯೊಂದು ಇನ್ಪುಟ್ ಸಾಧನವನ್ನು (input device) ಪರಿಶೀಲಿಸಲು ಬಯಸಿದರೆ, ಇವುಗಳನ್ನು ಬಳಸಿ:
• @media (any-hover: hover) • @media (any-pointer: fine)
ಮೌಸ್ ಅಳವಡಿಸಲಾದ ಟ್ಯಾಬ್ಲೆಟ್ ತನ್ನ ಪ್ರಾಥಮಿಕ ಇನ್ಪುಟ್ಗಾಗಿ hover: none ಎಂದು ವರದಿ ಮಾಡಬಹುದು. ಆದರೆ ಮೌಸ್ ಇರುವುದರಿಂದ ಅದು any-hover: hover ಎಂದು ವರದಿ ಮಾಡುತ್ತದೆ.
ಕೇವಲ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬಳಕೆದಾರರು ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಹೇಗೆ ಸ್ಪರ್ಶಿಸುತ್ತಾರೆ ಅಥವಾ ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ ಎಂಬುದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲು ಪ್ರಾರಂಭಿಸಿ.
ಮೂಲ (Source): https://dev.to/aanshik_sharma_26dd97ab33/the-css-media-query-that-changed-how-i-approach-responsive-desig-c1a