ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು ಮತ್ತು ಮೊಬೈಲ್ ಫೋನ್‌ಗಳ ಮೂಲಕ ಇಂಟರ್ನೆಟ್ ಪ್ರವೇಶಿಸುವ ಬಳಕೆದಾರರು ಹೆಚ್ಚುತ್ತಿದ್ದಾರೆ. ಇದು ನಿಮಗೆ ಈಗಾಗಲೇ ತಿಳಿದಿರುವಂತೆ, ನಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾಣುವ ಉತ್ತಮ ವೆಬ್ ಪುಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಇದು ಇನ್ನು ಮುಂದೆ ಸಾಕಾಗುವುದಿಲ್ಲ ಎಂದರ್ಥ: ಇದನ್ನು ಪ್ರತಿ ಮೊಬೈಲ್ ಸಾಧನದಲ್ಲಿಯೂ ನೋಡಬೇಕಾಗಿದೆ. ಸಮಸ್ಯೆ? ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ನಿರ್ಣಯಗಳು. ಅದಕ್ಕಾಗಿಯೇ ಎಲ್ಲಾ ಮಾಧ್ಯಮಗಳಿಗೆ (ಪ್ರಸಿದ್ಧರಿಗೆ) ಸರಿಯಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವಂತಹ ವಿನ್ಯಾಸವನ್ನು ಮಾಡುವುದು ತುಂಬಾ ಕಷ್ಟ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವಿನ್ಯಾಸ, ಎಂದು ಅನುವಾದಿಸಲಾಗಿದೆ ಹೊಂದಾಣಿಕೆಯ ವಿನ್ಯಾಸ).
ಈ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ವಿನ್ಯಾಸವನ್ನು ಮಾಡುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ. ಗಮನಿಸಿ!
ಹೊಂದಾಣಿಕೆಯ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಸಲಹೆಗಳು
- ಸರಳ ಟೆಂಪ್ಲೆಟ್ ಮಾಡಿಸರಳವಾಗಿ ನಾನು ಬ್ಲಾಂಡ್ ಎಂದು ಅರ್ಥವಲ್ಲ. ನಾನು ಬಗ್ಗೆ ಮಾತನಾಡುತ್ತಿದ್ದೇನೆ ರಚನೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ HTML: ಅದು ಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ, ಉತ್ತಮವಾಗಿರುತ್ತದೆ. ಕಂಪ್ಯೂಟರ್ ಪರದೆಯು ಮೂರು ಲಂಬ ಕಾಲಮ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ; ಮೊಬೈಲ್‌ನ ಪರದೆಯಲ್ಲಿ, ನೀವು ಒಂದನ್ನು ಮಾತ್ರ ಹೊಂದಿಸುತ್ತೀರಿ. ಅದರ ಬಗ್ಗೆ ಯೋಚಿಸಿ ಮತ್ತು ನೀವು ಅಂಶಗಳನ್ನು ಹೇಗೆ ಮರುಹೊಂದಿಸುತ್ತೀರಿ.
- ಅನಗತ್ಯ ಎಲ್ಲವನ್ನೂ ನಿವಾರಿಸಿJQuery ಪರಿಣಾಮಗಳು, ಫ್ಲ್ಯಾಶ್ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ನಿಮ್ಮ ಪುಟದ ಲೋಡಿಂಗ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸುವ ಯಾವುದೇ ಕೋಡ್ ಅನ್ನು ತಪ್ಪಿಸಿ. ನೀವು ಹೊಂದಿರುವ ಈ ಪ್ರಕಾರದ ಕಡಿಮೆ ವಿಷಯ, ವೆಬ್ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ.
- ಶೈಲಿಯನ್ನು ವಿವರಿಸಿ ಪ್ರತಿ "ಗಾತ್ರ" ಕ್ಕೆ cssTiny.css, small.css, ಮತ್ತು big.css ಅನ್ನು ರಚಿಸಿ (ಉದಾಹರಣೆಗೆ) ಅದು ವೀಕ್ಷಿಸಿದ ಸಾಧನವನ್ನು ಆಧರಿಸಿ ಚಲಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:
@ ಆಮದು url (tiny.css) (ಕನಿಷ್ಠ-ಅಗಲ: 300px);
@ ಆಮದು url (small.css) (ಕನಿಷ್ಠ-ಅಗಲ: 600px);
@ ಆಮದು url (big.css) (ಕನಿಷ್ಠ-ಅಗಲ: 900px);
- ಹೆಚ್ಚು ಬಳಸಿದ ನಿರ್ಣಯಗಳು320px/480px/720px/768px/900px/1024px
- ನಿಮ್ಮ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಮಾಡಿನಿಮಗೆ ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ನಿಗದಿತ ಮೊತ್ತದ ಬದಲು ಶೇಕಡಾವಾರು ಕೆಲಸ ಮಾಡಿ. ಕೆಲವು ಉಲ್ಲೇಖ ಸಮಾನತೆಗಳು ಇಲ್ಲಿವೆ: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- ಮುದ್ರಣಕಲೆ ಇದು ಎಂದಿಗಿಂತಲೂ ಮುಖ್ಯವಾಗಿದೆ ಕೆಲವೊಮ್ಮೆ ನಿಮ್ಮ ಸಾಧನದ ಪರದೆಯು ತುಂಬಾ ಚಿಕ್ಕದಾಗಿರಬಹುದು, ಅದರಲ್ಲಿ ನೀವು ನೋಡುವೆಲ್ಲವೂ ಪಠ್ಯವಾಗಿರುತ್ತದೆ. ಅದಕ್ಕಾಗಿಯೇ ನಾವು ನಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿರುವ ಅತ್ಯುತ್ತಮ ಫಾಂಟ್‌ಗಳನ್ನು ಬಹಳ ಎಚ್ಚರಿಕೆಯಿಂದ ಆರಿಸಬೇಕಾಗುತ್ತದೆ, ಇದರಿಂದ ಅವು ಗಾತ್ರದಲ್ಲಿ ಕಡಿಮೆಯಾದಾಗ ಅವು ಸ್ಪಷ್ಟತೆಯನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದಿಲ್ಲ. ಇದಲ್ಲದೆ, ವೆಬ್‌ಗೆ ಅಗತ್ಯವಾದ ಪಾತ್ರವನ್ನು ನೀಡುವ ವ್ಯಕ್ತಿತ್ವದೊಂದಿಗೆ ಹೆಚ್ಚು ತಟಸ್ಥ ಫಾಂಟ್‌ಗಳನ್ನು ಇತರರೊಂದಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿಸುವುದು ಎಂದು ನಾವು ತಿಳಿದಿರಬೇಕು. ಆದ್ದರಿಂದ, ಮೊದಲ ಸುಳಿವು ನೀವು ಬಳಸಲು ಹೊರಟಿರುವ ಫಾಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸಮಯವನ್ನು ಕಳೆಯುವುದು.
- ಯುಎಸ್ಎ ಉತ್ತಮ ಗುಣಮಟ್ಟದ ಚಿತ್ರಗಳುಸ್ಥಳವು ಕಡಿಮೆಯಾದಂತೆ, ಚಿತ್ರಗಳು ಅದರೊಂದಿಗೆ ಹೋಗುತ್ತವೆ. ಕಡಿಮೆಯಾದಾಗ ಗುಣಮಟ್ಟವನ್ನು ಕಳೆದುಕೊಳ್ಳದಂತಹವುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ, ಮತ್ತು ಸ್ಕೇಲ್ ಮಾಡಿದಾಗ ಅದು ಒಂದೇ ರೀತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಕಡಿಮೆ ಗುಣಮಟ್ಟದ ಚಿತ್ರವು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಕೆಟ್ಟದಾಗಿ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ.
- ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಯಾವಾಗಲೂ ನೋಡಲಾಗುತ್ತದೆ ತುಂಬಿದೆನಿಮ್ಮ CSS ನಲ್ಲಿ img (ಅಗಲ: 100%;) ಕೋಡ್ ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಫೋಟೋಗಳನ್ನು ಕತ್ತರಿಸದಂತೆ ತಡೆಯಿರಿ. ಈ ರೀತಿಯಾಗಿ, ನೀವು ಸಾಧನವನ್ನು ಚಿತ್ರಕ್ಕೆ ನೀಡಬೇಕಾದ ಎತ್ತರವನ್ನು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಹೇಳುತ್ತಿರುವಿರಿ ಇದರಿಂದ ಅದರ ಅಗಲವು ನೂರು ಪ್ರತಿಶತವನ್ನು ಕಾಣಬಹುದು.
- ಎಲ್ಲಾ ಕಡಿಮೆ ಅದೇ URLWww.mysite.com/mobile ನಂತಹ ಸಬ್‌ಡೊಮೇನ್‌ಗಳ ಬಗ್ಗೆ ಮರೆತುಬಿಡಿ, ಏಕೆಂದರೆ ರೂಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿರುವ ಅದೇ index.html ಫೈಲ್ ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ (ನೀವು ಹೊಂದಾಣಿಕೆಯ ವಿನ್ಯಾಸವನ್ನು ಸರಿಯಾಗಿ ಮಾಡಿದರೆ). ನೀವು ಈಗಾಗಲೇ ಪ್ರಯೋಜನವನ್ನು ತಿಳಿದಿದ್ದೀರಿ: ಕಡಿಮೆ ಸಬ್‌ಡೊಮೇನ್‌ಗಳು, ಪುಟ ಲೋಡ್ ವೇಗವಾಗಿರುತ್ತದೆ.
- ಬೆಂಬಲಗಳ ಲಾಭವನ್ನು ಪಡೆಯಿರಿ: ಕಾಲ್ಪನಿಕವಾಗಿರಿ ಐಪ್ಯಾಡ್ ಅಥವಾ ಮೊಬೈಲ್ ಫೋನ್‌ಗಿಂತ ಡೆಸ್ಕ್‌ಟಾಪ್ ಕಂಪ್ಯೂಟರ್‌ನಿಂದ ವೆಬ್‌ಸೈಟ್ ಪ್ರವೇಶಿಸುವುದು ಒಂದೇ ಅಲ್ಲ. ಮೊದಲನೆಯದರೊಂದಿಗೆ, ನೀವು ಶಾಂತ ಮತ್ತು ಶಾಂತ ರೀತಿಯಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತೀರಿ. ಎರಡನೆಯದರೊಂದಿಗೆ, ನೀವು ಅದನ್ನು ನಿಷ್ಫಲ ಗಂಟೆಗಳಲ್ಲಿ ಮಾಡುತ್ತೀರಿ ಮತ್ತು ನೀವು ಬೇಸರಗೊಂಡ ತಕ್ಷಣ ವಿಂಡೋವನ್ನು ಮುಚ್ಚುತ್ತೀರಿ. ಬಳಕೆದಾರರನ್ನು ರಂಜಿಸಲು ಈ ಷರತ್ತುಗಳ ಲಾಭವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ ಮತ್ತು ಅವರು ನಿಮಗೆ ಅರ್ಪಿಸಲಿರುವ ಆ ಕೆಲವೇ ನಿಮಿಷಗಳಲ್ಲಿ ಅವರನ್ನು ಮೋಜು ಮಾಡಿ. ಬಹುಶಃ ಅವನು ಮನೆಗೆ ಬಂದಾಗ ಅವನು ನಿಮ್ಮನ್ನು ಹೆಚ್ಚು ಶಾಂತ ರೀತಿಯಲ್ಲಿ ಭೇಟಿ ಮಾಡಲು ನಿರ್ಧರಿಸುತ್ತಾನೆ.
- ಸ್ಫೂರ್ತಿ ಪಡೆಯಿರಿ ಡಿಜಿಟಲ್ ಪ್ರಕಟಣೆಗಳಲ್ಲಿ, ಈ ಸಲಹೆ ಏಕೆ ಎಂದು ನೀವು ಆಶ್ಚರ್ಯ ಪಡುತ್ತೀರಿ. ಬಹಳ ಸುಲಭ: ಡಿಜಿಟಲ್ ನಿಯತಕಾಲಿಕೆಗಳು (ಒಳ್ಳೆಯದು) ಬೆಂಬಲದ ಲಾಭವನ್ನು ಹೇಗೆ ಪಡೆಯುವುದು ಎಂದು ತಿಳಿದಿದೆ ಮತ್ತು ಅವುಗಳ ವಿನ್ಯಾಸವು ತುಂಬಾ ಬುದ್ಧಿವಂತವಾಗಿದೆ. ಅವರಿಂದ ಸ್ಫೂರ್ತಿ ಪಡೆಯಿರಿ ಮತ್ತು ಬಿಡಲು ಕಷ್ಟಕರವಾದ ವೆಬ್‌ಸೈಟ್ ಮಾಡಿ.
ಹೆಚ್ಚಿನ ಮಾಹಿತಿ - ಡಿಜಿಟಲ್ ನಿಯತಕಾಲಿಕೆಗಳು
ಮೂಲ - ಸ್ಪ್ಲಿಯೊ, 960.gs, ಕಾಲಮ್
ನಾನು ಹೆಚ್ಚು ಒಪ್ಪದ ವಿಷಯಗಳಿವೆ.
ಪಾಯಿಂಟ್ 5 ರಲ್ಲಿ ... 200px = 15,38% ಮತ್ತು ಕೆಳಗಿನವುಗಳಿಂದ ... ಈ ಉಲ್ಲೇಖ ಹೋಲಿಕೆಯನ್ನು ಯಾವುದೇ ಪೋಷಕ ಅಳತೆ ಇಲ್ಲದೆ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ, ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ಗಳ ಗಾತ್ರವು ಶೇಕಡಾವಾರುಗಳಂತೆ ಸಾಪೇಕ್ಷ ಅಳತೆಯಲ್ಲ!
ಅಗಲದೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ: 100% ತಪ್ಪು, ಇದು ಶಿಫಾರಸು ಎಂದು ನಾನು ಭಾವಿಸುವುದಿಲ್ಲ. ಚಿತ್ರಗಳು ಅವುಗಳ ಅಗಲ ಮತ್ತು ಎತ್ತರದಿಂದ ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಸರ್ವರ್ ಮಾಹಿತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಕಡಿಮೆ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ (ಅದು ಅದರ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಹಾಕಬೇಕಾಗಿಲ್ಲ) ಮತ್ತು ನಾವು ಪುಟದ ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಸುಧಾರಿಸುತ್ತೇವೆ (ಇದು ಹೊಂದಾಣಿಕೆಯ ಅಥವಾ ಸ್ಪಂದಿಸುವ ವೆಬ್‌ನಲ್ಲಿ ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ ವಿನ್ಯಾಸ).
ಮೂಗಿನ ಕೆಲಸವಾಗಿದ್ದರೂ ಸಹ ನಾನು ಈಗಾಗಲೇ ಸೇರಿಸುತ್ತೇನೆ ... ರೆಟಿನಾ ಪರದೆಗಳಿಗಾಗಿ ಚಿತ್ರಗಳು. ನಾವು ಸ್ಪಂದಿಸುವ ವೆಬ್ ವಿನ್ಯಾಸವನ್ನು ಮಾಡಲು ಬಯಸಿದರೆ, ರೆಟಿನಾ ಪ್ರದರ್ಶನಕ್ಕಾಗಿ ಚಿತ್ರಗಳನ್ನು ಬಳಸುವುದು ಕಡ್ಡಾಯವಾಗಿದೆ, ಏಕೆಂದರೆ ಹೆಚ್ಚಿನ% ಮೊಬೈಲ್ ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್ ವೀಕ್ಷಣೆಗಳು ಈ ಪರದೆಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಆದ್ದರಿಂದ ಪ್ರಯತ್ನಗಳನ್ನು ಅರ್ಧ ಥ್ರೊಟಲ್ನಲ್ಲಿ ವಿನ್ಯಾಸಗೊಳಿಸಲು ಯಾವುದೇ ಅರ್ಥವಿಲ್ಲ.
ಉಳಿದವರಿಗೆ ಒಳ್ಳೆಯದು
ಪಾಯಿಂಟ್ 5 ರಲ್ಲಿ, ಅವರು ನಿಮ್ಮನ್ನು ಸಂದರ್ಭಕ್ಕೆ ತಕ್ಕಂತೆ ಮತ್ತು 1300 ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ 3px ನ ಒಟ್ಟು ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ನಿಮಗೆ ತಿಳಿಸುತ್ತಾರೆ, 200, 300 ಮತ್ತು 1000 ರಲ್ಲಿ ಒಂದು.
ನೀವು ಅದನ್ನು ಶೇಕಡಾವಾರು ಪ್ರಮಾಣದಲ್ಲಿ ರವಾನಿಸಿದರೆ, ಅವರು ಹೇಳಿದಂತೆ ಅವರು 15,38% ((200 * 100) / 1300) (ದಶಮಾಂಶ ಕೆಳಗೆ, ಅಂತರರಾಷ್ಟ್ರೀಯ ವ್ಯವಸ್ಥೆ: ಪಿ)
ಆದರೆ ನಾವು 500px ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಮಾತನಾಡಿದರೆ ಮತ್ತು ನಮ್ಮಲ್ಲಿ 3 ಕಾಲಮ್‌ಗಳು, 200 ರಲ್ಲಿ ಒಂದು, 200 ರಲ್ಲಿ ಮತ್ತೊಂದು ಮತ್ತು 100px ನಷ್ಟು ಇದ್ದರೆ, ಶೇಕಡಾವಾರುಗಳು ಇನ್ನು ಮುಂದೆ ಒಂದೇ ಆಗಿರುವುದಿಲ್ಲ, ಈ ಸಂದರ್ಭದಲ್ಲಿ 200px = 40% ((200 * 100) / 500)
ಅವುಗಳು ಹೀಗಿವೆ: 200px = 40% ಮತ್ತು 100px = 10%
ಬನ್ನಿ, ನಾನು ಹೇಳುತ್ತಿದ್ದಂತೆ, ಅವು ನೀವು ಸೂಚಿಸುವ ಉಲ್ಲೇಖವಲ್ಲ, ಅವು ಕೇವಲ 1300px ವಿನ್ಯಾಸದ ಉಲ್ಲೇಖವಾಗಿದೆ.
ಸಂಬಂಧಿಸಿದಂತೆ
ಎಂತಹ ವೈಫಲ್ಯ, ನೀವು ಜಗತ್ತಿನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಸರಿ! ಮತ್ತೊಮ್ಮೆ ಧನ್ಯವಾದಗಳು ;)