Makale Rehberi
Mobil uyumlu CSS, farklı çözünürlüklere göre farklı @media ekran duyarlı düzenlerini nasıl görüntüler?
Aşağıdaki makale, uyarlanabilir genişlik elde etmek için farklı çözünürlükleri belirlemek ve farklı genişlik düzenlerini görüntülemek için CSS'nin nasıl kullanılacağını tanıtacaktır.
İhtiyacı olan arkadaşlar başvurabilir, umarım herkese faydalı olur.
@media ve @media serigrafi web sayfaları arasındaki fark
- Bir yazdırma aygıtında css kullanılması gerekiyorsa, @media kullanın, aksi takdirde @media ekranını kullanın.
- Ancak, bu mutlaka doğru değildir.Aslında, "ekran" yerine "yazdır" yazarsanız ve @media print olarak yazarsanız, yazdırma aygıtında CSS kullanılabilir;
- Ancak @media print tarafından bildirilen css'nin yalnızca yazdırma aygıtlarında geçerli olduğunu unutmayın.
1. DIVCSS küçük vaka açıklaması
Önce ".abc" adında bir DIV kutusu CSS belirledik, yüksekliğini 300 piksele ve CSS kenarlığını siyaha ayarladık;
- ve ayarlar
margin:0 autoDüzen ortalanmıştır ve bu iki stil, kolay görüntüleme için önceden ayarlanmıştır.
Genişliği görüntülemek için tarayıcıyı manuel olarak sürükleriz ve ardından kutunun genişliğinin nasıl değiştiğini gözlemleriz:
- Tarayıcının genişliği 500 pikselden fazla olmayan bir genişliğe ayarlandığında, kutunun genişliğine karşılık gelen 100 piksel görüntülenir;
- Tarayıcının genişliği 901 pikselden az olacak şekilde ayarlandığında, 200 pikseli gösteren kutunun genişliğine karşılık gelen ".abc" görüntülenir;
- Tarayıcı genişliği 1201 pikselden büyük olacak şekilde ayarlandığında, kutu nesnesinin genişliği 1200 piksel görüntüler;
- 1200 pikselden az olduğunda, ekran genişliği 900 pikseldir.
2, CSS cep telefonu mobil terminali uyarlanabilir kodu
.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 kod sırasının CSS'yi büyükten küçüğe dizdiğine dikkat edilmelidir (tarayıcı genişliği ne kadar büyük olursa ön taraf o kadar yüksek olur).
- Bunun nedeni, mantıksal ilişki nedeniyle @media'nın CSS hata ayıklama kararı, kararın başarısız olmasına neden olacaktır.
3. HTML kodu
<!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>Not: cihaz-en-boy oranı
- device-aspect-ratio, aynı zamanda kullanışlı bir özellik olan belirli ekran en-boy oranlarına sahip aygıtları sığdırmak için kullanılabilir.
- Örneğin sayfamız 4:3 en-boy oranına sahip normal ekranlar için bir stil tanımlamak istiyor.
- Ardından 16:9 ve 16:10 geniş ekran için uyarlanabilir genişlik ve sabit genişlik gibi başka bir stil tanımlayın:
- @media yalnızca ekran ve (cihaz-en-boy oranı:4/3)
4. Başlıca tarayıcılar ile uyumlu HTML+CSS+JS kaynak kodu
<!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>Yukarıdaki, farklı ekranlara göre farklı @media ekran duyarlı ayrıntılı içerik görüntüleyen cep telefonuna uyarlanabilir CSS'dir.
Umut Chen Weiliang Blogu ( https://www.chenweiliang.com/ ) Paylaşılan "Mobil Uyarlanabilir CSS Farklı Ekranlar Farklı @media Ekran Duyarlılığı Gösterir", bu size yardımcı olur.
Bu makalenin bağlantısını paylaşmaya hoş geldiniz:https://www.chenweiliang.com/cwl-2074.html
En son güncellemeleri almak için Chen Weiliang'ın blogunun Telegram kanalına hoş geldiniz!
📚 Bu rehber çok büyük değer içeriyor, 🌟Bu nadir bir fırsat, kaçırmayın! ⏰⌛💨
İsterseniz paylaşın ve beğenin!
Paylaşımlarınız ve beğenileriniz bizim sürekli motivasyonumuz!