ನೀವು ಸಿಎಸ್ಎಸ್ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಹೇಗೆ ಬರೆಯುತ್ತಿದ್ದೀರಿ?

ನಿಮಿಷ-ಅಗಲ ಮತ್ತು ಗರಿಷ್ಠ-ಅಗಲ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್

ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸ ಆ ಪುಟಗಳನ್ನು ಸಂದರ್ಶಕರ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ವಿನ್ಯಾಸ ಮತ್ತು ವಿನ್ಯಾಸವನ್ನು ಬದಲಾಯಿಸುವಂತಹ ವೆಬ್ಪುಟಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಮಾರ್ಗವಾಗಿದೆ. ದೊಡ್ಡದಾದ ಪರದೆಗಳಿಗೆ ದೊಡ್ಡದಾದ ಪ್ರದರ್ಶಕಗಳಿಗೆ ಸೂಕ್ತವಾದ ವಿನ್ಯಾಸವನ್ನು ಪಡೆಯಬಹುದು ಆದರೆ ಸಣ್ಣ ಸಾಧನಗಳು, ಮೊಬೈಲ್ ಫೋನ್ಗಳಂತಹವುಗಳು ಸಣ್ಣದಾದ ಪರದೆಯಲ್ಲಿ ಸೂಕ್ತವಾದ ರೀತಿಯಲ್ಲಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾದ ಅದೇ ವೆಬ್ಸೈಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಬಹುದು. ಈ ವಿಧಾನವು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಹುಡುಕಾಟ ಎಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳನ್ನು ಸುಧಾರಿಸಲು ಸಹ ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್ ವಿನ್ಯಾಸದ ಒಂದು ಪ್ರಮುಖ ಭಾಗವೆಂದರೆ ಸಿಎಸ್ಎಸ್ ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳು.

ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ನಲ್ಲಿ ಸ್ವಲ್ಪ ಷರತ್ತುಬದ್ಧ ಹೇಳಿಕೆಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ, ನಿರ್ದಿಷ್ಟ ಸ್ಥಿತಿಯನ್ನು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಪರಿಣಾಮ ಬೀರುವ ಕೆಲವು CSS ನಿಯಮಗಳನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ - ಪರದೆಯ ಗಾತ್ರವು ಕೆಲವು ಮಿತಿಗಳ ಮೇಲೆ ಅಥವಾ ಕೆಳಗಿನದ್ದಾಗಿರುತ್ತದೆ.

ಆಕ್ಷನ್ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು

ಆದ್ದರಿಂದ ನೀವು ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಹೇಗೆ ಬಳಸುತ್ತೀರಿ? ಇಲ್ಲಿ ಒಂದು ಸರಳ ಉದಾಹರಣೆಯಾಗಿದೆ:

1. ನೀವು ಯಾವುದೇ ದೃಶ್ಯಾತ್ಮಕ ಶೈಲಿಗಳಿಗಿಂತ ಉತ್ತಮವಾಗಿ ರಚಿಸಲಾದ HTML ಡಾಕ್ಯುಮೆಂಟ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಬಹುದು (ಅಂದರೆ ಅದು ಸಿಎಸ್ಎಸ್ ಯಾವುದು)
2. ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ನಲ್ಲಿ, ಪುಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದರ ಮೂಲಕ ಮತ್ತು ವೆಬ್ಸೈಟ್ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದಕ್ಕೆ ಬೇಸ್ಲೈನ್ ​​ಅನ್ನು ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಮಾಡುವಂತೆ ನೀವು ಪ್ರಾರಂಭಿಸಬಹುದು. ಪುಟದ ಫಾಂಟ್ ಗಾತ್ರವು 16 ಪಿಕ್ಸೆಲ್ಗಳಾಗಿರಬೇಕು ಎಂದು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಈ ಸಿಎಸ್ಎಸ್ ಬರೆಯಬಹುದು: ದೇಹ {ಫಾಂಟ್ ಗಾತ್ರ: 16px; }
3. ಈಗ, ಹಾಗೆ ಮಾಡಲು ಸಾಕಷ್ಟು ರಿಯಲ್ ಎಸ್ಟೇಟ್ ಹೊಂದಿರುವ ದೊಡ್ಡ ಪರದೆಗಳಿಗಾಗಿ ಆ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸಲು ನೀವು ಬಯಸಬಹುದು. ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಸೈನ್ ಇನ್ ಆಗಿರುವುದು. ನೀವು ಈ ರೀತಿಯ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು: @media screen ಮತ್ತು (min-width: 1000px) {}
4. ಇದು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದೆ. ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಸ್ವತಃ ಸ್ಥಾಪಿಸಲು @ ಮಿಡಿಯಾದೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ನೀವು "ಮಾಧ್ಯಮ ಟೈಪ್" ಅನ್ನು ಹೊಂದಿಸಿದ ನಂತರ, ಈ ಸಂದರ್ಭದಲ್ಲಿ "ಸ್ಕ್ರೀನ್" ಆಗಿದೆ. ಇದು ಡೆಸ್ಕ್ಟಾಪ್ ಕಂಪ್ಯೂಟರ್ ಪರದೆಗಳು, ಮಾತ್ರೆಗಳು, ಫೋನ್ಗಳು ಇತ್ಯಾದಿಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ನೀವು "ಮಾಧ್ಯಮ ವೈಶಿಷ್ಟ್ಯ" ದೊಂದಿಗೆ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಕೊನೆಗೊಳಿಸಬಹುದು. ಮೇಲಿನ ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ಅದು "ಮಧ್ಯ ಅಗಲ: 1000px" ಆಗಿದೆ. ಇದರರ್ಥ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯು 1000 ಪಿಕ್ಸೆಲ್ಗಳ ಅಗಲದ ಕನಿಷ್ಟ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಪ್ರದರ್ಶನಗಳಿಗಾಗಿ ಕಿಕ್ ಆಗುತ್ತದೆ.

1. ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯ ಈ ಅಂಶಗಳ ನಂತರ, ನೀವು ಯಾವುದೇ ಸಾಮಾನ್ಯ ಸಿಎಸ್ಎಸ್ ನಿಯಮದಲ್ಲಿ ಏನು ಮಾಡಬೇಕೆಂಬುದನ್ನು ಹೋಲುವಂತಹ ಆರಂಭಿಕ ಮತ್ತು ಮುಚ್ಚುವ ಸುರುಳಿಯಾದ ಬ್ರೇಸ್ ಅನ್ನು ಸೇರಿಸಿ.
2. ಒಂದು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗೆ ಅಂತಿಮ ಹಂತವೆಂದರೆ ಈ ಸ್ಥಿತಿಯನ್ನು ಪೂರೈಸಿದ ನಂತರ ಅನ್ವಯಿಸಲು ಬಯಸುವ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಸೇರಿಸುವುದು. ಈ ಪ್ರಶ್ನೆಗಳನ್ನು ನೀವು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ರೂಪಿಸುವ ಸುರುಳಿಯಾದ ಬ್ರೇಸ್ಗಳ ನಡುವೆ ಸೇರಿಸಿ: @media ಸ್ಕ್ರೀನ್ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 1000px) {body {font-size: 20px; }
3. ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯ ಪರಿಸ್ಥಿತಿಗಳು ಪೂರೈಸಿದಾಗ (ಬ್ರೌಸರ್ ವಿಂಡೋವು ಕನಿಷ್ಟ 1000 ಪಿಕ್ಸೆಲ್ ಅಗಲವಾಗಿರುತ್ತದೆ), ಈ CSS ಶೈಲಿ ಪರಿಣಾಮಕಾರಿಯಾಗುತ್ತದೆ, ನಮ್ಮ ಸೈಟ್ನ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ನಾವು ಮೂಲತಃ ನಮ್ಮ ಹೊಸ ಮೌಲ್ಯದ 20 ಪಿಕ್ಸೆಲ್ಗಳಿಗೆ ಸ್ಥಾಪಿಸಿದ 16 ಪಿಕ್ಸೆಲ್ಗಳಿಂದ ಬದಲಾಯಿಸುತ್ತೇವೆ.

ಹೆಚ್ಚಿನ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುವುದು

ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ ದೃಶ್ಯ ಗೋಚರತೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಅಗತ್ಯವಾದ ಈ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯೊಳಗೆ ನೀವು ಅನೇಕ CSS ನಿಯಮಗಳನ್ನು ಇರಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಫಾಂಟ್ ಗಾತ್ರವನ್ನು 20 ಪಿಕ್ಸೆಲ್ಗಳಿಗೆ ಮಾತ್ರ ಹೆಚ್ಚಿಸಲು ನೀವು ಬಯಸಿದರೆ, ಆದರೆ ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳ ಬಣ್ಣವನ್ನು ಕಪ್ಪು (# 000000) ಗೆ ಬದಲಾಯಿಸಬಹುದು, ನೀವು ಇದನ್ನು ಸೇರಿಸಬಹುದು:

@media ಸ್ಕ್ರೀನ್ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 1000px) {body {font-size: 20px; } ಪು {color: # 000000; }}

ಹೆಚ್ಚಿನ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ

ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ಪ್ರತಿ ದೊಡ್ಡ ಗಾತ್ರದ ಹೆಚ್ಚಿನ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸೇರಿಸಬಹುದು, ಅವುಗಳನ್ನು ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆಗೆ ಸೇರಿಸಿಕೊಳ್ಳಿ:

@media ಸ್ಕ್ರೀನ್ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 1000px) {body {font-size: 20px; } ಪು {color: # 000000; {} @media ಸ್ಕ್ರೀನ್ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 1400px) {body {font-size: 24px; }}

ಮೊದಲ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು 1000 ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ಅಗಲವಾಗುತ್ತವೆ, ಫಾಂಟ್ ಗಾತ್ರವನ್ನು 20 ಪಿಕ್ಸೆಲ್ಗಳಾಗಿ ಬದಲಾಯಿಸುತ್ತವೆ. ನಂತರ, ಬ್ರೌಸರ್ 1400 ಪಿಕ್ಸೆಲ್ಗಳಿಗಿಂತಲೂ ಹೆಚ್ಚಿನದಾಗಿದ್ದರೆ, ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಮತ್ತೆ 24 ಪಿಕ್ಸೆಲ್ಗಳಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ವೆಬ್ಸೈಟ್ಗೆ ಅಗತ್ಯವಿರುವ ಅನೇಕ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ನೀವು ಸೇರಿಸಬಹುದು.

ಮಿನ್-ಅಗಲ ಮತ್ತು ಗರಿಷ್ಠ ಅಗಲ

"ನಿಮಿಷ-ಅಗಲ" ಅಥವಾ "ಗರಿಷ್ಠ-ಅಗಲ" ವನ್ನು ಬಳಸಿಕೊಂಡು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬರೆಯಲು ಎರಡು ವಿಧಾನಗಳಿವೆ. ಇಲ್ಲಿಯವರೆಗೆ, ನಾವು "ನಿಮಿಷ-ಅಗಲ" ಕ್ರಿಯೆಯನ್ನು ನೋಡಿದ್ದೇವೆ. ಬ್ರೌಸರ್ ಕನಿಷ್ಠ ಕನಿಷ್ಠ ಅಗಲ ತಲುಪಿದ ನಂತರ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಲು ಕಾರಣವಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ ಬ್ರೌಸರ್ ಕನಿಷ್ಠ 1000 ಪಿಕ್ಸೆಲ್ ಅಗಲವಾಗಿದ್ದಾಗ "ನಿಮಿಷ-ಅಗಲ: 1000px" ಅನ್ನು ಬಳಸುವ ಪ್ರಶ್ನೆಯು ಅನ್ವಯವಾಗುತ್ತದೆ. ನೀವು "ಮೊಬೈಲ್-ಮೊದಲ" ರೀತಿಯಲ್ಲಿ ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿರುವಾಗ ಈ ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆ ಶೈಲಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ನೀವು "ಗರಿಷ್ಠ-ಅಗಲ" ಅನ್ನು ಬಳಸಿದರೆ, ಅದು ವಿರುದ್ಧವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಈ ಗಾತ್ರಕ್ಕಿಂತ ಕೆಳಗೆ ಕುಸಿದಾಗ ಒಮ್ಮೆ "ಗರಿಷ್ಠ-ಅಗಲ: 1000px" ನ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯು ಅನ್ವಯವಾಗುತ್ತದೆ.

ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ

ಮೀಡಿಯಾ ಪ್ರಶ್ನಾವಳಿಗಳೊಂದಿಗಿನ ಒಂದು ಸವಾಲು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನಲ್ಲಿನ ಹಳೆಯ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಅವರ ಬೆಂಬಲವಿಲ್ಲ. ಅದೃಷ್ಟವಶಾತ್, ಆ ಹಳೆಯ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳು ಬೆಂಬಲವನ್ನು ಪ್ಯಾಚ್ ಮಾಡುವಂತಹ ಪಾಲಿಫಿಲ್ಗಳು ಲಭ್ಯವಿವೆ , ಈ ಸೈಟ್ನ ಪ್ರದರ್ಶನವು ಹಳೆಯ ಬ್ರೌಸರ್ ಸಾಫ್ಟ್ವೇರ್ನಲ್ಲಿ ಒಡೆದುಹೋಗಿಲ್ಲ ಎಂದು ಇನ್ನೂ ಖಾತ್ರಿಪಡಿಸಿಕೊಳ್ಳುವಲ್ಲಿ ನೀವು ಅವುಗಳನ್ನು ಇಂದು ವೆಬ್ಸೈಟ್ಗಳಲ್ಲಿ ಬಳಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ 1/24/17 ರಂದು ಸಂಪಾದಿಸಲಾಗಿದೆ