Yazdırma stilleri
@media print ile yazdırma stillerini öğrenirsin.
@media print bloğu
@media print bloğu yalnızca sayfa yazdırılırken uygulanır. Bu blokta yazdırma için gerekli olmayan menü, reklam ve form öğelerini gizler; yazı rengini siyah, arka planı beyaz yapar; bağlantı alt çizgilerini kaldırırsın.
Böylece çıktı temiz ve mürekkep dostu olur. Ekran stilleri yazdırırken devre dışı kalmaz; print bloğu yalnızca üzerine biner.
Yazdırırken menüyü gizle
Yazdırırken gezinme menüleri, reklamlar ve arama kutuları işe yaramaz. @media print içinde .nav, .ads { display: none; } yazarak bunları çıktıdan kaldırırsın. Sayfa yalnızca ana içeriği basar.
Renkli arka planları da kaldırmak mürekkebi korur; tarayıcılar varsayılan olarak arka planları zaten basmaz ama yine de background: #fff yazmak tutarlılığı artırır.
Yazdırma dostu renkler
Yazdırırken açık gri yazılar okunamaz; renkli arka planlar mürekkep yakar. @media print içinde body { color: #000; background: #fff; } yazmak çıktıyı siyah üzerine beyaz yapar.
Bağlantıların alt çizgilerini de kaldırabilirsin; çünkü çıktıda tıklama anlamsızdır. Yazı tipini de serif yaparsan uzun paragraflar kağıtta daha rahat okunur.
Uygulama Yazdırma düzenini kur
Bir @media print bloğu aç. İçinde .nav öğesini display: none ile gizle ve body yazı rengini siyah (#000) yap. Yalnızca bu bloğu yaz.
Örnek çözümü göster
@media print {
.nav {
display: none;
}
body {
color: #000;
}
}Kendini test et
-
Hangi media query yazdırma için stiller yazmaya yarar?
/* ? */ @media ____ { .nav { display: none; } }- @media screen
- @media print
- @media tv
- @media all and print
Cevabı göster
@media print — Doğru. @media print bloğu yalnızca yazdırırken çalışır.
-
Yazdırma medya türünü yaz
@media ____ { .nav { display: none; } body { color: #000; } }Cevabı göster
@media print { .nav { display: none; } body { color: #000; } } -
Bildirimi yazdırma rolüyle eşleştir
- @media print
- Yazdırma koşulu
- display: none
- Yazdırırken gizle
- color: #000
- Siyah yazı rengi
- background: #fff
- Beyaz arka plan