Cara memilih gaya CSS yang sesuai berdasarkan saiz/peranti skrin

Question

Bootstrap 3 mempunyai beberapa kelas CSS yang bagus dalam utiliti responsif yang boleh menyembunyikan atau menunjukkan blok tertentu bergantung pada resolusi skrin ;http://getbootstrap.com/css/#responsive-utilities-classes

Saya mempunyai beberapa peraturan gaya dalam fail CSS yang saya mahu gunakan atau tidak gunakan berdasarkan peleraian skrin.

Apakah yang perlu saya lakukan?

Saya akan memampatkan semua fail CSS ke dalam satu fail untuk penggunaan pengeluaran, tetapi jika tiada penyelesaian lain daripada menggunakan fail CSS berasingan untuk resolusi skrin yang berbeza.

Answer 1

Pengesanan adalah automatik. Anda perlu menentukan css yang boleh digunakan untuk setiap resolusi skrin:

/* 对于所有屏幕，使用14px字体大小 */
body {  
    font-size: 14px;    
}
/* 响应式，对于小屏幕，使用13px字体大小 */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}

Answer 2

Gunakan @media untuk bertanya. Mereka sesuai dengan keperluan itu. Berikut ialah contoh cara mereka berfungsi:

@media (max-width: 800px) {
  /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */
}

Ini hanya akan berfungsi pada peranti dengan lebar sama dengan atau kurang daripada 800px.

Ketahui lebih lanjut tentang pertanyaan media pada Rangkaian Pembangun Mozilla.