ಯಾವುದೇ ಸಾಧನಕ್ಕೆ ಸಲೀಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ, ನಿಜವಾಗಿಯೂ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಿಎಸ್‌ಎಸ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳ (vw, vh, vmin, vmax, vi, vb) ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.
ಸಿಎಸ್‌ಎಸ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಜಗತ್ತಿನಲ್ಲಿ, ವಿವಿಧ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಸಲೀಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಸಿಎಸ್‌ಎಸ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು (vw, vh, vmin, vmax, vi, ಮತ್ತು vb) ಇದನ್ನು ಸಾಧಿಸಲು ಪ್ರಬಲ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ, ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಅಂಶಗಳನ್ನು ಗಾತ್ರಗೊಳಿಸಲು ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳ ಜಟಿಲತೆಗಳನ್ನು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅವುಗಳ ಕಾರ್ಯನಿರ್ವಹಣೆ, ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಅನುಷ್ಠಾನಕ್ಕಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಬ್ರೌಸರ್‌ನ ವ್ಯೂಪೋರ್ಟ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿದ ಸಿಎಸ್‌ಎಸ್ ಸಾಪೇಕ್ಷ ಉದ್ದದ ಯೂನಿಟ್‌ಗಳಾಗಿವೆ. ಪಿಕ್ಸೆಲ್‌ಗಳ (px)ಂತಹ ಸ್ಥಿರ ಯೂನಿಟ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಇವು ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾಗಿರುತ್ತವೆ, ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ವ್ಯೂಪೋರ್ಟ್‌ನ ಆಯಾಮಗಳ ಆಧಾರದ ಮೇಲೆ ತಮ್ಮ ಮೌಲ್ಯಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತವೆ. ಈ ಹೊಂದಿಕೊಳ್ಳುವಿಕೆಯು ಅವುಗಳನ್ನು ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಳಿಂದ ಹಿಡಿದು ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್ ಮಾನಿಟರ್‌ಗಳವರೆಗೆ ಯಾವುದೇ ಸಾಧನದಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾಣುವ ಫ್ಲೂಯಿಡ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸೂಕ್ತವಾಗಿಸುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ವಿನ್ಯಾಸಗಳು ಸಾಮರಸ್ಯದಿಂದ ಅಳೆಯಲ್ಪಡುತ್ತವೆ, ವಿವಿಧ ಸ್ಕ್ರೀನ್ ರೆಸಲ್ಯೂಶನ್‌ಗಳಲ್ಲಿ ಪ್ರಮಾಣಗಳನ್ನು ಮತ್ತು ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದು ಇದರ ಪ್ರಮುಖ ಪ್ರಯೋಜನವಾಗಿದೆ.
ಪ್ರಮುಖ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು: vw, vh, vmin, vmax
vw(ವ್ಯೂಪೋರ್ಟ್ ಅಗಲ): ವ್ಯೂಪೋರ್ಟ್‌ನ ಅಗಲದ 1% ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ,10vwವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ 10% ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.vh(ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರ): ವ್ಯೂಪೋರ್ಟ್‌ನ ಎತ್ತರದ 1% ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಅದೇ ರೀತಿ,50vhವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರದ 50% ಗೆ ಸಮನಾಗಿರುತ್ತದೆ.vmin(ವ್ಯೂಪೋರ್ಟ್ ಕನಿಷ್ಠ):vwಮತ್ತುvhನಡುವಿನ ಚಿಕ್ಕ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರಕ್ಕಿಂತ ಅಗಲವಾಗಿದ್ದರೆ,vminvhಗೆ ಸಮನಾಗಿರುತ್ತದೆ. ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ, ವ್ಯೂಪೋರ್ಟ್ ಅಗಲಕ್ಕಿಂತ ಎತ್ತರವಾಗಿದ್ದರೆ,vminvwಗೆ ಸಮನಾಗಿರುತ್ತದೆ. ಇದು ವಿಶೇಷವಾಗಿ ಚೌಕ ಅಥವಾ ಚೌಕಾಕಾರದ ಅಂಶಗಳಲ್ಲಿ ಪ್ರಮಾಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಉಪಯುಕ್ತವಾಗಿದೆ.vmax(ವ್ಯೂಪೋರ್ಟ್ ಗರಿಷ್ಠ):vwಮತ್ತುvhನಡುವಿನ ದೊಡ್ಡ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರಕ್ಕಿಂತ ಅಗಲವಾಗಿದ್ದರೆ,vmaxvwಗೆ ಸಮನಾಗಿರುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಅಗಲಕ್ಕಿಂತ ಎತ್ತರವಾಗಿದ್ದರೆ,vmaxvhಗೆ ಸಮನಾಗಿರುತ್ತದೆ. ನೀವು ಒಂದು ಅಂಶವು ವ್ಯೂಪೋರ್ಟ್‌ನ ಅತಿದೊಡ್ಡ ಆಯಾಮವನ್ನು ತುಂಬಬೇಕೆಂದು ಬಯಸಿದಾಗ ಇದನ್ನು ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
ಲಾಜಿಕಲ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು: vi, vb
ಹೊಸ ಲಾಜಿಕಲ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳಾದ vi ಮತ್ತು vb, ಕ್ರಮವಾಗಿ ವ್ಯೂಪೋರ್ಟ್‌ನ *ಇನ್‌ಲೈನ್* ಮತ್ತು *ಬ್ಲಾಕ್* ಆಯಾಮಗಳಿಗೆ ಸಂಬಂಧಿಸಿವೆ. ಈ ಯೂನಿಟ್‌ಗಳು ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಬರವಣಿಗೆಯ ಮೋಡ್ ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕಿಗೆ ಸಂವೇದನಾಶೀಲವಾಗಿವೆ, ಇದು ಅಂತರರಾಷ್ಟ್ರೀಕೃತ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿಸುತ್ತದೆ. ಇದು ವಿಭಿನ್ನ ಬರವಣಿಗೆ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ಸಹಜವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
vi(ವ್ಯೂಪೋರ್ಟ್ ಇನ್‌ಲೈನ್): ವ್ಯೂಪೋರ್ಟ್‌ನ ಇನ್‌ಲೈನ್ ಗಾತ್ರದ 1% ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಇದು ವಿಷಯವು ಅಡ್ಡಲಾಗಿ ಹರಿಯುವ ದಿಕ್ಕಾಗಿದೆ (ಉದಾಹರಣೆಗೆ, ಹೆಚ್ಚಿನ ಪಾಶ್ಚಿಮಾತ್ಯ ಭಾಷೆಗಳಲ್ಲಿ ಎಡದಿಂದ ಬಲಕ್ಕೆ). ಎಡದಿಂದ ಬಲಕ್ಕೆ ಬರೆಯುವ ಕ್ರಮದಲ್ಲಿ,vivwಗೆ ಸಮಾನವಾಗಿ ವರ್ತಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಬಲದಿಂದ ಎಡಕ್ಕೆ ಬರೆಯುವ ಕ್ರಮದಲ್ಲಿ (ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂನಂತಹ),viಅಡ್ಡ ಆಯಾಮವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಆದರೆ ವ್ಯೂಪೋರ್ಟ್‌ನ ಬಲ ತುದಿಯಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.vb(ವ್ಯೂಪೋರ್ಟ್ ಬ್ಲಾಕ್): ವ್ಯೂಪೋರ್ಟ್‌ನ ಬ್ಲಾಕ್ ಗಾತ್ರದ 1% ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಇದು ವಿಷಯವು ಲಂಬವಾಗಿ ಹರಿಯುವ ದಿಕ್ಕಾಗಿದೆ. ಇದು ಹೆಚ್ಚಿನ ಸಾಮಾನ್ಯ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಲ್ಲಿvhಗೆ ಸಮಾನವಾಗಿರುತ್ತದೆ.
ಉದಾಹರಣೆ: ಇಂಗ್ಲಿಷ್ (ಎಡದಿಂದ ಬಲಕ್ಕೆ) ಮತ್ತು ಅರೇಬಿಕ್ (ಬಲದಿಂದ ಎಡಕ್ಕೆ) ಎರಡೂ ಭಾಷೆಗಳಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರಿಗಣಿಸೋಣ. ಕಂಟೇನರ್‌ನ ಬದಿಗಳಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಮಾರ್ಜಿನ್‌ಗಾಗಿ vi ಅನ್ನು ಬಳಸುವುದರಿಂದ ಭಾಷೆಯ ದಿಕ್ಕನ್ನು ಆಧರಿಸಿ ಸರಿಯಾದ ಬದಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ, ಬಳಕೆದಾರರ ಭಾಷೆಯ ಆದ್ಯತೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾದ ಅಂತರವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ವಿವಿಧ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಬಳಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣಗಳಿವೆ:
1. ಪೂರ್ಣ-ಎತ್ತರದ ವಿಭಾಗಗಳು
ಸಂಪೂರ್ಣ ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ವ್ಯಾಪಿಸುವ ಪೂರ್ಣ-ಎತ್ತರದ ವಿಭಾಗಗಳನ್ನು ರಚಿಸುವುದು ಒಂದು ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸ ಮಾದರಿಯಾಗಿದೆ. ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಇದನ್ನು ನಂಬಲಾಗದಷ್ಟು ಸುಲಭವಾಗಿಸುತ್ತವೆ:
.full-height-section {
height: 100vh;
width: 100vw; /* Ensures it fills the full width as well */
}
ಈ ಕೋಡ್ ಸ್ನಿಪ್ಪೆಟ್ ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ .full-height-section ಅಂಶವು ಯಾವಾಗಲೂ ಸಂಪೂರ್ಣ ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರವನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. width: 100vw; ಅಂಶವು ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ತುಂಬುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ನಿಜವಾದ ಪೂರ್ಣ-ವ್ಯೂಪೋರ್ಟ್ ವಿಭಾಗವನ್ನು ರಚಿಸುತ್ತದೆ.
2. ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿ
ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರದೊಂದಿಗೆ ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಅಳೆಯುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿಯನ್ನು ರಚಿಸಲು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಪಠ್ಯವು ಸ್ಪಷ್ಟವಾಗಿ ಓದಬಲ್ಲ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿ ಉಳಿಯುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
h1 {
font-size: 8vw; /* Font size scales with viewport width */
}
p {
font-size: 2vh; /* Font size scales with viewport height */
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, h1 ಅಂಶದ font-size ಅನ್ನು 8vw ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಅಂದರೆ ಅದು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ 8% ಆಗಿರುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಅಗಲ ಬದಲಾದಂತೆ, ಫಾಂಟ್ ಗಾತ್ರವು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಅದೇ ರೀತಿ, p ಅಂಶದ font-size ಅನ್ನು 2vh ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಇದು ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರದೊಂದಿಗೆ ಅಳೆಯಲ್ಪಡುತ್ತದೆ.
3. ಆಸ್ಪೆಕ್ಟ್ ರೇಷಿಯೋ ಬಾಕ್ಸ್‌ಗಳು
ಚಿತ್ರಗಳು ಮತ್ತು ವೀಡಿಯೊಗಳಿಗಾಗಿ ಆಸ್ಪೆಕ್ಟ್ ರೇಷಿಯೋವನ್ನು ನಿರ್ವಹಿಸುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ, ಆದರೆ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು padding-top ಟ್ರಿಕ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ಸರಳ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತವೆ:
.aspect-ratio-box {
width: 100%;
position: relative;
}
.aspect-ratio-box::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 aspect ratio (height/width * 100) */
}
.aspect-ratio-box > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ಈ ತಂತ್ರವು ಅಪೇಕ್ಷಿತ ಆಸ್ಪೆಕ್ಟ್ ರೇಷಿಯೋ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, 16:9) ಆಧರಿಸಿ ಲೆಕ್ಕಹಾಕಿದ padding-top ಮೌಲ್ಯದೊಂದಿಗೆ ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ (::before) ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಂತರ .aspect-ratio-box ಒಳಗೆ ಇರುವ ವಿಷಯವನ್ನು ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನೀಕರಿಸಲಾಗುತ್ತದೆ, ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಆಸ್ಪೆಕ್ಟ್ ರೇಷಿಯೋವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ತಮ್ಮ ಪ್ರಮಾಣಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾದ ವೀಡಿಯೊಗಳು ಅಥವಾ ಚಿತ್ರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲು ಇದು ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿದೆ.
4. ಫ್ಲೂಯಿಡ್ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು
ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸಾಲುಗಳು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಫ್ಲೂಯಿಡ್ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು ಮತ್ತು ಇತರ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಬಹುದು.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Each column is at least 20% of the viewport width */
grid-gap: 1vw;
}
.grid-item {
padding: 1vw;
background-color: #f0f0f0;
}
ಇಲ್ಲಿ, grid-template-columns ಪ್ರಾಪರ್ಟಿ minmax(20vw, 1fr) ಅನ್ನು ಬಳಸುತ್ತದೆ, ಪ್ರತಿ ಕಾಲಮ್ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ ಕನಿಷ್ಠ 20% ಇರುವಂತೆ ನೋಡಿಕೊಳ್ಳುತ್ತದೆ ಆದರೆ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ಬೆಳೆಯಬಹುದು. grid-gap ಅನ್ನು 1vw ಬಳಸಿ ಹೊಂದಿಸಲಾಗಿದೆ, ಗ್ರಿಡ್ ಐಟಂಗಳ ನಡುವಿನ ಅಂತರವು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರದೊಂದಿಗೆ ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಅಳೆಯಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
5. ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವುದು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ದೃಶ್ಯ ಸಾಮರಸ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಅಂಶಗಳು ತುಂಬಾ ಇಕ್ಕಟ್ಟಾಗಿ ಅಥವಾ ತುಂಬಾ ಹರಡಿಕೊಂಡಂತೆ ಕಾಣದಂತೆ ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
.container {
padding: 5vw;
margin-bottom: 3vh;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .container ಅಂಶವು ಎಲ್ಲಾ ಬದಿಗಳಲ್ಲಿ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ 5% ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರದ 3% ಕೆಳ ಅಂಚನ್ನು ಹೊಂದಿದೆ.
6. ಸ್ಕೇಲೆಬಲ್ ಯುಐ ಅಂಶಗಳು
ಬಟನ್‌ಗಳು, ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳು ಮತ್ತು ಇತರ ಯುಐ ಅಂಶಗಳನ್ನು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಿ ಗಾತ್ರಗೊಳಿಸುವ ಮೂಲಕ ಹೆಚ್ಚು ರೆಸ್ಪಾನ್ಸಿವ್ ಮಾಡಬಹುದು. ಇದು ಯುಐ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ತಮ್ಮ ಸಾಪೇಕ್ಷ ಪ್ರಮಾಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ವಿವಿಧ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
.button {
font-size: 2.5vh;
padding: 1vh 2vw;
border-radius: 0.5vh;
}
.button ಕ್ಲಾಸ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರವನ್ನು ಆಧರಿಸಿದ ಫಾಂಟ್ ಗಾತ್ರ (2.5vh) ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರ ಮತ್ತು ಅಗಲ ಎರಡನ್ನೂ ಆಧರಿಸಿದ ಪ್ಯಾಡಿಂಗ್‌ನೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಇದು ಬಟನ್ ಪಠ್ಯವು ಓದಬಲ್ಲದಾಗಿ ಉಳಿಯುತ್ತದೆ ಮತ್ತು ಬಟನ್ ಗಾತ್ರವು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಆಯಾಮಗಳೊಂದಿಗೆ ಸೂಕ್ತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಪ್ರಬಲ ಮಾರ್ಗವನ್ನು ನೀಡಿದರೂ, ಸಂಭವನೀಯ ಅಪಾಯಗಳನ್ನು ತಪ್ಪಿಸಲು ಅವುಗಳನ್ನು ವಿವೇಕದಿಂದ ಬಳಸುವುದು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ:
1. ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಮೌಲ್ಯಗಳನ್ನು ಪರಿಗಣಿಸಿ
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಕೆಲವೊಮ್ಮೆ ಬಹಳ ಚಿಕ್ಕ ಅಥವಾ ಬಹಳ ದೊಡ್ಡ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ವಿಪರೀತ ಮೌಲ್ಯಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಇದನ್ನು ತಡೆಗಟ್ಟಲು, ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್ ಮೌಲ್ಯಗಳಿಗೆ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಮಿತಿಗಳನ್ನು ಹೊಂದಿಸಲು min(), max(), ಮತ್ತು clamp() ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
h1 {
font-size: clamp(2rem, 8vw, 5rem); /* Font size is at least 2rem, at most 5rem, and scales with viewport width in between */
}
clamp() ಫಂಕ್ಷನ್ ಮೂರು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ಕನಿಷ್ಠ ಮೌಲ್ಯ, ಆದ್ಯತೆಯ ಮೌಲ್ಯ, ಮತ್ತು ಗರಿಷ್ಠ ಮೌಲ್ಯ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, font-size ಕನಿಷ್ಠ 2rem, ಗರಿಷ್ಠ 5rem ಆಗಿರುತ್ತದೆ ಮತ್ತು ಆ ಮಿತಿಗಳ ನಡುವೆ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದೊಂದಿಗೆ (8vw) ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಅಳೆಯಲ್ಪಡುತ್ತದೆ. ಇದು ಚಿಕ್ಕ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ಪಠ್ಯವು ತುಂಬಾ ಚಿಕ್ಕದಾಗುವುದನ್ನು ಅಥವಾ ದೊಡ್ಡ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ತುಂಬಾ ದೊಡ್ಡದಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
2. ಇತರ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ
em, rem, ಮತ್ತು px ನಂತಹ ಇತರ ಸಿಎಸ್‌ಎಸ್ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಇದು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರ ಮತ್ತು ವಿಷಯದ ಸಂದರ್ಭ ಎರಡನ್ನೂ ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುವ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
p {
font-size: calc(1rem + 0.5vw); /* Base font size of 1rem plus a scaling factor */
line-height: 1.6;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, font-size ಅನ್ನು calc() ಫಂಕ್ಷನ್ ಬಳಸಿ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ, ಇದು 1rem ನ ಮೂಲ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ 0.5vw ನ ಸ್ಕೇಲಿಂಗ್ ಫ್ಯಾಕ್ಟರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದು ಚಿಕ್ಕ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿಯೂ ಪಠ್ಯವು ಯಾವಾಗಲೂ ಓದಬಲ್ಲದು ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆದರೆ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರದೊಂದಿಗೆ ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಅಳೆಯಲ್ಪಡುತ್ತದೆ.
3. ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ
ಯಾವುದೇ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ತಂತ್ರದಂತೆಯೇ, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ವಿವಿಧ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್‌ಗಳನ್ನು ಅನುಕರಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸಿ, ಮತ್ತು ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ನಿಜವಾದ ಭೌತಿಕ ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದ್ದರೂ, ಬ್ರೌಸರ್‌ಗಳ ನಡುವೆ ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳು ಇರಬಹುದು.
4. ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ
ಟೈಪೋಗ್ರಫಿಗಾಗಿ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಪಠ್ಯವು ಓದಬಲ್ಲದು ಮತ್ತು ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಓದಲು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್, ಫಾಂಟ್ ಗಾತ್ರ, ಮತ್ತು ಲೈನ್ ಎತ್ತರಕ್ಕೆ ಗಮನ ಕೊಡಿ. ಸೂಕ್ತವಾದ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ನಿರ್ಧರಿಸಲು WebAIM ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್‌ನಂತಹ ಪರಿಕರಗಳು ಸಹಾಯಕವಾಗಬಹುದು. ಅಲ್ಲದೆ, `html` ಅಂಶದ ಮೇಲೆ ನೇರವಾಗಿ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ `font-size` ಅಥವಾ ಇತರ ಗಾತ್ರ-ಸಂಬಂಧಿತ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ಪಠ್ಯ ಗಾತ್ರೀಕರಣಕ್ಕಾಗಿ ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳಿಗೆ ಅಡ್ಡಿಪಡಿಸಬಹುದು.
5. ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳೊಂದಿಗೆ (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್) ಬಳಸಿ
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್) ಬಳಸುವುದು ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಾದ್ಯಂತ ಸುಲಭ ಹೊಂದಾಣಿಕೆಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
:root {
--base-padding: 2vw;
}
.element {
padding: var(--base-padding);
}
.another-element {
margin-left: var(--base-padding);
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, --base-padding ವೇರಿಯಬಲ್ ಅನ್ನು 2vw ಮೌಲ್ಯದೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಈ ವೇರಿಯಬಲ್ ಅನ್ನು ನಂತರ ವಿವಿಧ ಅಂಶಗಳ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್ ಅನ್ನು ಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ವೇರಿಯಬಲ್‌ನ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್‌ನಾದ್ಯಂತ ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಸರಿಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು
1. ಡೈನಾಮಿಕ್ ಹೊಂದಾಣಿಕೆಗಳಿಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವುದು
ಕೆಲವು ಸನ್ನಿವೇಶಗಳಲ್ಲಿ, ಬಳಕೆದಾರರ ಸಂವಹನಗಳು ಅಥವಾ ಇತರ ಘಟನೆಗಳ ಆಧಾರದ ಮೇಲೆ ನೀವು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್ ಮೌಲ್ಯಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. ವ್ಯೂಪೋರ್ಟ್ ಆಯಾಮಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ನವೀಕರಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು.
// JavaScript
function updateViewportVariables() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Initial call
// CSS
.element {
height: calc(var(--vh, 1vh) * 50); /* Fallback to 1vh if --vh is not defined */
}
ಈ ಕೋಡ್ ಸ್ನಿಪ್ಪೆಟ್ ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್ (--vh) ಅನ್ನು ಹೊಂದಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಂತರ .element ಈ ವೇರಿಯಬಲ್ ಅನ್ನು ಅದರ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಲು ಬಳಸುತ್ತದೆ, ಅದು ಯಾವಾಗಲೂ ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರದ 50% ಅನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. `1vh` ಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್, ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್ ಸರಿಯಾಗಿ ಹೊಂದಿಸದಿದ್ದರೂ ಸಹ ಅಂಶವು ಸಮಂಜಸವಾದ ಎತ್ತರವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
2. ಮೊಬೈಲ್ ಕೀಬೋರ್ಡ್ ಗೋಚರತೆಯನ್ನು ನಿರ್ವಹಿಸುವುದು
ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ, ವರ್ಚುವಲ್ ಕೀಬೋರ್ಡ್ ಪ್ರದರ್ಶಿಸಿದಾಗ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರ ಬದಲಾಗಬಹುದು. ಇದು ಪೂರ್ಣ-ಎತ್ತರದ ವಿಭಾಗಗಳಿಗಾಗಿ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಇದನ್ನು ತಗ್ಗಿಸಲು ಒಂದು ವಿಧಾನವೆಂದರೆ ದೊಡ್ಡ, ಸಣ್ಣ ಮತ್ತು ಡೈನಾಮಿಕ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದು, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಈ ಸನ್ನಿವೇಶಗಳಿಗೆ ನಡವಳಿಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇವುಗಳು `lvh`, `svh`, ಮತ್ತು `dvh` ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಲಭ್ಯವಿದೆ. ಸಾಫ್ಟ್ ಕೀಬೋರ್ಡ್ ತೋರಿಸಿದಂತೆ `dvh` ಯೂನಿಟ್ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಕೆಲವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲ ಸೀಮಿತವಾಗಿರಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
.full-height-section {
height: 100dvh;
}
3. ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳವಾಗಿದ್ದರೂ, ಅವುಗಳ ಅತಿಯಾದ ಬಳಕೆಯು ಪುಟ ರೆಂಡರಿಂಗ್ ವೇಗದ ಮೇಲೆ ಸಂಭಾವ್ಯವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು, ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಅಂಶಕ್ಕೂ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಬದಲಾಗಿ, ಪ್ರಮುಖ ಲೇಔಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಟೈಪೋಗ್ರಫಿಗಾಗಿ ಅವುಗಳನ್ನು ಆಯಕಟ್ಟಿನ ರೀತಿಯಲ್ಲಿ ಬಳಸುವುದರ ಮೇಲೆ ಗಮನಹರಿಸಿ. ಅಲ್ಲದೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನೀವು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್ ಮೌಲ್ಯಗಳನ್ನು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
ವಿವಿಧ ದೇಶಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿನ ಉದಾಹರಣೆಗಳು
ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳ ಸೌಂದರ್ಯವೆಂದರೆ ಅವು ವೈವಿಧ್ಯಮಯ ಸ್ಥಳಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಸಾಂಸ್ಕೃತಿಕ ಪರಿಗಣನೆಗಳೊಂದಿಗೆ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸೋಣ:
- ಪೂರ್ವ ಏಷ್ಯಾದ ಭಾಷೆಗಳು (ಉದಾ., ಚೈನೀಸ್, ಜಪಾನೀಸ್, ಕೊರಿಯನ್): ಈ ಭಾಷೆಗಳಿಗೆ ಅಕ್ಷರಗಳ ಸಂಕೀರ್ಣತೆಯಿಂದಾಗಿ ದೊಡ್ಡ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಬೇಕಾಗುತ್ತವೆ. ಸ್ಕ್ರೀನ್ ಸ್ಥಳಾವಕಾಶ ಸೀಮಿತವಾಗಿರುವ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತವೆ. `clamp()` ಅನ್ನು `vw` ಜೊತೆಗೆ `rem` ಯೂನಿಟ್‌ಗಳನ್ನು ಆಧರಿಸಿದ ಹೆಚ್ಚಿನ ಕನಿಷ್ಠ ಫಾಂಟ್ ಗಾತ್ರದೊಂದಿಗೆ ಬಳಸುವುದು ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
- ಬಲದಿಂದ ಎಡಕ್ಕೆ ಭಾಷೆಗಳು (ಉದಾ., ಅರೇಬಿಕ್, ಹೀಬ್ರೂ): ಲಾಜಿಕಲ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು (`vi`, `vb`) ಸ್ಥಿರವಾದ ಲೇಔಟ್ ದಿಕ್ಕನ್ನು ಮತ್ತು ಅಂತರವನ್ನು ನಿರ್ವಹಿಸಲು ಅಮೂಲ್ಯವಾಗಿವೆ, ವಿಶೇಷವಾಗಿ ಮಿರರ್ಡ್ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಸರಿಹೊಂದಿಸಿದ ವಿಷಯ ಹರಿವಿನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.
- ವಿಭಿನ್ನ ಇಂಟರ್ನೆಟ್ ವೇಗ ಹೊಂದಿರುವ ದೇಶಗಳು: ಚಿತ್ರದ ಗಾತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಮತ್ತು ವೇಗದ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ರಚಿಸಲಾದ ಆಸ್ಪೆಕ್ಟ್ ರೇಷಿಯೋ ಬಾಕ್ಸ್‌ಗಳು ನಿಧಾನಗತಿಯ ಸಂಪರ್ಕಗಳಲ್ಲಿ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗಲು ಚಿಕ್ಕ ಫೈಲ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವಾಗ ಚಿತ್ರಗಳು ಮತ್ತು ವೀಡಿಯೊಗಳು ತಮ್ಮ ಪ್ರಮಾಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
- ಸಂಸ್ಕೃತಿಗಳಾದ್ಯಂತ ಪ್ರವೇಶಸಾಧ್ಯತೆ: ಬೇಸ್‌ಲೈನ್ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕಾಗಿ `rem` ಮತ್ತು ಸ್ಕೇಲಿಂಗ್‌ಗಾಗಿ `vw` ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುವುದು ಬಳಕೆದಾರರಿಗೆ ಅವರ ಭೌಗೋಳಿಕ ಸ್ಥಳ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ ಸಂದರ್ಭವನ್ನು ಲೆಕ್ಕಿಸದೆ ತಮ್ಮ ವೈಯಕ್ತಿಕ ಅಗತ್ಯಗಳನ್ನು ಆಧರಿಸಿ ಗಾತ್ರವನ್ನು ಅತಿಕ್ರಮಿಸಲು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಬಳಕೆದಾರರಿಗೆ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ಆಯ್ಕೆಗಳನ್ನು ಒದಗಿಸುವುದು ಸಾರ್ವತ್ರಿಕವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
ತೀರ್ಮಾನ
ಸಿಎಸ್‌ಎಸ್ ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳು ಯಾವುದೇ ಸಾಧನಕ್ಕೆ ಸಲೀಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ನಿಜವಾಗಿಯೂ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಿದೆ. vw, vh, vmin, vmax, vi, ಮತ್ತು vb ಗಳ ಕಾರ್ಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ಎಲ್ಲಾ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಬಳಕೆದಾರರ ಸಾಧನ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕ ಹಿನ್ನೆಲೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ ಜಾಗತಿಕವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಸೌಂದರ್ಯಾತ್ಮಕವಾಗಿ ಆಹ್ಲಾದಕರವಾದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಈ ಯೂನಿಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ.
ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ ಮತ್ತು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳು ಎಲ್ಲರಿಗೂ ಒಳಗೊಳ್ಳುವ ಮತ್ತು ಬಳಸಬಹುದಾದವು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ.