ಲೇಖನ ಡೈರೆಕ್ಟರಿ
ಮೊಬೈಲ್ ರೆಸ್ಪಾನ್ಸಿವ್ CSS ವಿಭಿನ್ನ ರೆಸಲ್ಯೂಶನ್‌ಗಳ ಪ್ರಕಾರ ವಿಭಿನ್ನ @ಮೀಡಿಯಾ ಸ್ಕ್ರೀನ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸುತ್ತದೆ?
ವಿಭಿನ್ನ ರೆಸಲ್ಯೂಶನ್‌ಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಮತ್ತು ಹೊಂದಾಣಿಕೆಯ ಅಗಲವನ್ನು ಸಾಧಿಸಲು ವಿಭಿನ್ನ ಅಗಲ ವಿನ್ಯಾಸಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು CSS ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಮುಂದಿನ ಲೇಖನವು ಪರಿಚಯಿಸುತ್ತದೆ.
ಅಗತ್ಯವಿರುವ ಸ್ನೇಹಿತರು ಇದನ್ನು ಉಲ್ಲೇಖಿಸಬಹುದು, ಇದು ಎಲ್ಲರಿಗೂ ಸಹಾಯಕವಾಗಲಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
@media ಮತ್ತು @media ಸ್ಕ್ರೀನ್ ಪ್ರಿಂಟಿಂಗ್ ವೆಬ್ ಪುಟಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸ
- ಮುದ್ರಣ ಸಾಧನದಲ್ಲಿ css ಅನ್ನು ಬಳಸಬೇಕಾದರೆ, @media ಅನ್ನು ಬಳಸಿ, ಇಲ್ಲದಿದ್ದರೆ, @media ಪರದೆಯನ್ನು ಬಳಸಿ.
- ಆದಾಗ್ಯೂ, ಇದು ಅಗತ್ಯವಾಗಿ ನಿಜವಲ್ಲ, ವಾಸ್ತವವಾಗಿ, ನೀವು "ಸ್ಕ್ರೀನ್" ಅನ್ನು "ಪ್ರಿಂಟ್" ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿದರೆ ಮತ್ತು @ ಮೀಡಿಯಾ ಪ್ರಿಂಟ್ ಎಂದು ಬರೆದರೆ, ನಂತರ CSS ಅನ್ನು ಮುದ್ರಣ ಸಾಧನದಲ್ಲಿ ಬಳಸಬಹುದು;
- ಆದರೆ @ ಮೀಡಿಯಾ ಮುದ್ರಣದಿಂದ ಘೋಷಿಸಲಾದ css ಮುದ್ರಣ ಸಾಧನಗಳಲ್ಲಿ ಮಾತ್ರ ಮಾನ್ಯವಾಗಿರುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
1. DIVCSS ಸಣ್ಣ ಪ್ರಕರಣದ ವಿವರಣೆ
ನಾವು ಮೊದಲು ".abc" ಹೆಸರಿನ DIV ಬಾಕ್ಸ್ CSS ಅನ್ನು ಹೊಂದಿಸಿ, ಅದರ ಎತ್ತರವನ್ನು 300px ಗೆ ಹೊಂದಿಸಿ ಮತ್ತು CSS ಗಡಿಯನ್ನು ಕಪ್ಪು ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸಿ;
- ಮತ್ತು ಸೆಟ್ಟಿಂಗ್‌ಗಳು
margin:0 autoಲೇಔಟ್ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ ಮತ್ತು ಈ ಎರಡು ಶೈಲಿಗಳನ್ನು ಸುಲಭವಾಗಿ ವೀಕ್ಷಿಸಲು ಮೊದಲೇ ಹೊಂದಿಸಲಾಗಿದೆ.
ಅಗಲವನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಾವು ಬ್ರೌಸರ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಎಳೆಯುತ್ತೇವೆ ಮತ್ತು ನಂತರ ಬಾಕ್ಸ್‌ನ ಅಗಲವು ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ:
- ಬ್ರೌಸರ್‌ನ ಅಗಲವನ್ನು 500px ಗಿಂತ ಹೆಚ್ಚಿಲ್ಲದ ಅಗಲಕ್ಕೆ ಸರಿಹೊಂದಿಸಿದಾಗ, ಬಾಕ್ಸ್‌ನ ಅಗಲಕ್ಕೆ ಅನುಗುಣವಾಗಿ 100px ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ;
- ಬ್ರೌಸರ್‌ನ ಅಗಲವನ್ನು 901px ಗಿಂತ ಕಡಿಮೆಯಿರುವಂತೆ ಹೊಂದಿಸಿದಾಗ, ".abc" ಅನ್ನು ಬಾಕ್ಸ್‌ನ ಅಗಲಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ, ಅದು 200px ಅನ್ನು ತೋರಿಸುತ್ತದೆ;
- ಬ್ರೌಸರ್ ಅಗಲವನ್ನು 1201px ಗಿಂತ ಹೆಚ್ಚಿಗೆ ಸರಿಹೊಂದಿಸಿದಾಗ, ಬಾಕ್ಸ್ ವಸ್ತುವಿನ ಅಗಲವು 1200px ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ;
- ಇದು 1200px ಗಿಂತ ಕಡಿಮೆ ಇದ್ದಾಗ, ಪ್ರದರ್ಶನದ ಅಗಲವು 900px ಆಗಿರುತ್ತದೆ.
2, CSS ಮೊಬೈಲ್ ಫೋನ್ ಮೊಬೈಲ್ ಟರ್ಮಿನಲ್ ಅಡಾಪ್ಟಿವ್ ಕೋಡ್
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- CSS ಕೋಡ್ ಆದೇಶವು CSS ಅನ್ನು ದೊಡ್ಡದರಿಂದ ಚಿಕ್ಕದಕ್ಕೆ ಟೈಪ್‌ಸೆಟ್ ಮಾಡುತ್ತಿದೆ ಎಂದು ಗಮನಿಸಬೇಕು (ಬ್ರೌಸರ್ ಅಗಲವು ದೊಡ್ಡದಾಗಿದೆ, ಮುಂಭಾಗವು ಹೆಚ್ಚಾಗುತ್ತದೆ ಎಂದು ನಿರ್ಣಯಿಸುವುದು).
- ಇದು ತಾರ್ಕಿಕ ಸಂಬಂಧದ ಕಾರಣದಿಂದಾಗಿ, CSS ಡೀಬಗ್ ಮಾಡುವಿಕೆಯ @ ಮಾಧ್ಯಮದ ತೀರ್ಪು ತೀರ್ಪು ವಿಫಲಗೊಳ್ಳಲು ಕಾರಣವಾಗುತ್ತದೆ.
3. HTML ಕೋಡ್
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>ಗಮನಿಸಿ: ಸಾಧನ-ಆಕಾರ ಅನುಪಾತ
- ಸಾಧನ-ಆಸ್ಪೆಕ್ಟ್-ಅನುಪಾತವನ್ನು ನಿರ್ದಿಷ್ಟ ಪರದೆಯ ಆಕಾರ ಅನುಪಾತಗಳೊಂದಿಗೆ ಸಾಧನಗಳನ್ನು ಹೊಂದಿಸಲು ಬಳಸಬಹುದು, ಇದು ಉಪಯುಕ್ತ ಆಸ್ತಿಯಾಗಿದೆ.
- ಉದಾಹರಣೆಗೆ, ನಮ್ಮ ಪುಟವು 4:3 ರ ಆಕಾರ ಅನುಪಾತದೊಂದಿಗೆ ಸಾಮಾನ್ಯ ಪರದೆಯ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಯಸುತ್ತದೆ.
- ನಂತರ 16:9 ಮತ್ತು 16:10 ವೈಡ್‌ಸ್ಕ್ರೀನ್‌ಗಾಗಿ, ಹೊಂದಾಣಿಕೆಯ ಅಗಲ ಮತ್ತು ಸ್ಥಿರ ಅಗಲದಂತಹ ಮತ್ತೊಂದು ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:
- @ಮಾಧ್ಯಮ ಮಾತ್ರ ಪರದೆ ಮತ್ತು (ಸಾಧನ-ಆಸ್ಪೆಕ್ಟ್-ಅನುಪಾತ:4/3)
4. ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳು HTML+CSS+JS ಸೋರ್ಸ್ ಕೋಡ್‌ನೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>ಮೇಲಿನವು ಮೊಬೈಲ್ ಫೋನ್ ಅಡಾಪ್ಟಿವ್ CSS ಆಗಿದೆ, ಇದು ವಿಭಿನ್ನ ಪರದೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ವಿಭಿನ್ನ @ಮಾಧ್ಯಮ ಪರದೆಯ ಸ್ಪಂದಿಸುವ ವಿವರವಾದ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಹೋಪ್ ಚೆನ್ ವೈಲಿಯಾಂಗ್ ಬ್ಲಾಗ್ ( https://www.chenweiliang.com/ ) "ಮೊಬೈಲ್ ಅಡಾಪ್ಟಿವ್ CSS ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್‌ಗಳನ್ನು ಡಿಸ್‌ಪ್ಲೇ ಡಿಫರೆಂಟ್ @ಮೀಡಿಯಾ ಸ್ಕ್ರೀನ್ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್" ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ, ಇದು ನಿಮಗೆ ಸಹಾಯಕವಾಗಿದೆ.
ಈ ಲೇಖನದ ಲಿಂಕ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಸ್ವಾಗತ:https://www.chenweiliang.com/cwl-2074.html
ಇತ್ತೀಚಿನ ನವೀಕರಣಗಳನ್ನು ಪಡೆಯಲು ಚೆನ್ ವೈಲಿಯಾಂಗ್ ಅವರ ಬ್ಲಾಗ್‌ನ ಟೆಲಿಗ್ರಾಮ್ ಚಾನಲ್‌ಗೆ ಸುಸ್ವಾಗತ!
📚 ಈ ಮಾರ್ಗದರ್ಶಿಯು ದೊಡ್ಡ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ, 🌟ಇದು ಅಪರೂಪದ ಅವಕಾಶವಾಗಿದೆ, ಇದನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳಬೇಡಿ! ⏰⌛💨
ಇಷ್ಟವಾದಲ್ಲಿ ಶೇರ್ ಮಾಡಿ ಮತ್ತು ಲೈಕ್ ಮಾಡಿ!
ನಿಮ್ಮ ಹಂಚಿಕೆ ಮತ್ತು ಇಷ್ಟಗಳು ನಮ್ಮ ನಿರಂತರ ಪ್ರೇರಣೆ!