Κατάλογος άρθρου
Πώς το CSS που αποκρίνεται για κινητά εμφανίζει διαφορετικές διατάξεις απόκρισης οθόνης @media σύμφωνα με διαφορετικές αναλύσεις;
Το παρακάτω άρθρο θα εισαγάγει τον τρόπο χρήσης CSS για τον προσδιορισμό διαφορετικών αναλύσεων και την εμφάνιση διαφορετικών διατάξεων πλάτους για την επίτευξη προσαρμοστικού πλάτους.
Οι φίλοι που έχουν ανάγκη μπορούν να ανατρέξουν σε αυτό, ελπίζω να είναι χρήσιμο σε όλους.
Διαφορά μεταξύ ιστοσελίδων οθόνης @media και @media
- Εάν το css πρέπει να χρησιμοποιηθεί σε μια συσκευή εκτύπωσης, χρησιμοποιήστε το @media, διαφορετικά χρησιμοποιήστε την οθόνη @media.
- Ωστόσο, αυτό δεν είναι απαραίτητα αλήθεια. Στην πραγματικότητα, εάν αντικαταστήσετε το "screen" με το "print" και το γράψετε ως @media print, τότε το CSS μπορεί να χρησιμοποιηθεί στη συσκευή εκτύπωσης.
- Αλλά σημειώστε ότι το css που δηλώνεται από το @media print ισχύει μόνο σε συσκευές εκτύπωσης.
1. Περιγραφή μικρής θήκης DIVCSS
Αρχικά ορίσαμε ένα πλαίσιο DIV CSS με το όνομα ".abc", ορίσαμε το ύψος του σε 300 px και ορίσαμε το περίγραμμα CSS σε μαύρο.
- και ρυθμίσεις
margin:0 autoΗ διάταξη είναι κεντραρισμένη και αυτά τα δύο στυλ είναι προκαθορισμένα για εύκολη προβολή.
Σύρουμε χειροκίνητα το πρόγραμμα περιήγησης για να εμφανιστεί το πλάτος και, στη συνέχεια, παρατηρούμε πώς αλλάζει το πλάτος του πλαισίου:
- Όταν το πλάτος του προγράμματος περιήγησης ρυθμίζεται σε πλάτος που δεν υπερβαίνει τα 500 εικονοστοιχεία, εμφανίζονται 100 εικονοστοιχεία που αντιστοιχούν στο πλάτος του πλαισίου.
- Όταν το πλάτος του προγράμματος περιήγησης ρυθμιστεί ώστε να είναι μικρότερο από 901 εικονοστοιχεία, εμφανίζεται η ένδειξη ".abc" που αντιστοιχεί στο πλάτος του πλαισίου, το οποίο εμφανίζει 200 εικονοστοιχεία.
- Όταν το πλάτος του προγράμματος περιήγησης έχει ρυθμιστεί ώστε να είναι μεγαλύτερο από 1201 px, το πλάτος του αντικειμένου πλαισίου εμφανίζεται 1200 px.
- Όταν είναι μικρότερο από 1200 px, το πλάτος της οθόνης είναι 900 px.
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 από μεγάλο σε μικρό (αν κρίνουμε ότι όσο μεγαλύτερο είναι το πλάτος του προγράμματος περιήγησης, τόσο υψηλότερο είναι το μπροστινό μέρος).
- Αυτό οφείλεται στη λογική σχέση, η κρίση του @media για τον εντοπισμό σφαλμάτων 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, ορίστε ένα άλλο στυλ, όπως προσαρμοστικό πλάτος και σταθερό πλάτος:
- Οθόνη @media μόνο και (αναλογία συσκευής: 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 τερματικού κινητού, το οποίο εμφανίζει διαφορετικό λεπτομερές περιεχόμενο οθόνης @media, ανάλογα με τις διαφορετικές οθόνες.
Ιστολόγιο Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Κοινόχρηστο "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", το οποίο είναι χρήσιμο για εσάς.
Καλώς ήρθατε να μοιραστείτε τον σύνδεσμο αυτού του άρθρου:https://www.chenweiliang.com/cwl-2074.html
Καλώς ήρθατε στο κανάλι Telegram του ιστολογίου του Chen Weiliang για να λαμβάνετε τις τελευταίες ενημερώσεις!
📚 Αυτός ο οδηγός περιέχει τεράστια αξία, 🌟Αυτή είναι μια σπάνια ευκαιρία, μην τη χάσετε! ⏰⌛💨
Κοινοποιήστε και κάντε like αν σας αρέσει!
Η κοινή χρήση και τα like σας είναι το συνεχές μας κίνητρο!