Atoz CSS: Membuat reka bentuk responsif dengan pertanyaan media

mata utama

Elakkan menggunakan titik putus khusus peranti apabila membuat reka bentuk responsif. Sebaliknya, tetapkan titik putus utama dan titik penalaan halus sekunder yang kira-kira saiz kebanyakan telefon, tablet, dan peranti desktop/komputer riba.
Gunakan em atau rem sebagai unit breakpoint dan bukannya piksel untuk skalabiliti yang lebih baik. Ini akan membantu jika pengguna skala halaman atau meningkatkan saiz teks.
pertanyaan media CSS adalah alat yang berkuasa untuk membuat reka bentuk responsif. Mereka membolehkan anda menggunakan gaya yang berbeza untuk peranti yang berbeza dengan saiz skrin yang berbeza. Walau bagaimanapun, elakkan menggunakannya untuk mencari peranti tertentu, kerana ini boleh membawa kepada mimpi buruk penyelenggaraan. Sebaliknya, fokus pada mewujudkan reka bentuk responsif yang berfungsi untuk semua saiz skrin.

Artikel ini adalah sebahagian daripada siri Atoz CSS. Lihat tangkapan skrin lengkap dan transkrip pertanyaan media di sini.

Selamat datang ke siri Atoz CSS kami! Dalam siri ini, saya akan meneroka nilai CSS yang berbeza (dan sifat), masing -masing bermula dengan huruf yang berbeza dari abjad. Kami tahu bahawa kadang -kadang tangkapan skrin tidak mencukupi, jadi dalam artikel ini saya telah menambah tip/kursus cepat baru mengenai pertanyaan media.

m pertanyaan media perwakilan

Saya rasa majoriti pereka web dan pemaju kini biasa dengan konsep reka bentuk responsif. Jika tidak, periksa tangkapan skrin pertanyaan media.

Sejak reka bentuk responsif sangat popular, ia adalah tempat yang bagus untuk mempelajari beberapa petua yang dapat memperbaiki cara kami membangunkan laman web dan aplikasi untuk pelbagai peranti. Berikut adalah beberapa petua CSS untuk membantu anda.

Petua 1: Jangan gunakan titik putus untuk peranti tertentu

Harap ini tidak dapat dikatakan, tetapi sekiranya anda memerlukan peringatan atau tidak menemui amalan terbaik sebelum ini, saya fikir ia bernilai mengulangi.

Breakpoints untuk peranti tertentu mudah dikenalpasti dalam kod anda melalui pertanyaan media seperti yang ditunjukkan di bawah (tambahkan komen untuk peningkatan kejelasan):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

titik putus ini ditetapkan untuk peranti Apple dan mempunyai nilai "nombor sihir", seperti 768px atau 1024px.

Bagaimana jika tetingkap pengguna adalah 1025px atau 1023px?

pertanyaan media tidak akan berkuatkuasa dan gaya saiz peranti tidak akan digunakan.

Kadang -kadang anda mungkin memerlukan nilai -nilai yang sangat spesifik untuk titik putus (lebih lanjut mengenai ini kemudian), tetapi nampaknya saya melihat titik putus untuk peranti khusus ini adalah bau kod.

Jadi apa yang harus anda lakukan?

Teknik

2: Tetapkan titik utama breakpoint dan titik menengah penalaan Apabila mengusahakan projek -projek responsif, saya cenderung untuk menetapkan titik putus integer sewenang -wenang yang kira -kira saiz kebanyakan telefon, tablet, dan peranti desktop/komputer riba.

Saya cenderung menggunakan titik putus utama berikut (walaupun kadang -kadang ini mungkin berubah bergantung pada projek):

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

Menggunakan titik putus ini tidak mengehadkan reka bentuk untuk berubah hanya pada titik -titik ini, tetapi memberikan asas yang baik untuk menggunakan tiga jenis peranti utama.

Untuk tweak reka bentuk berasaskan kandungan (iaitu, apabila kandungan mula kelihatan rosak, tidak seimbang, atau tidak sesuai dengan baik), anda boleh menggunakan titik penalaan untuk menyesuaikan unsur-unsur dan menggilap butiran projek.

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

tip 3: Gunakan em atau rem sebagai unit breakpoint

Jangan gunakan PX, tetapi gunakan salah satu unit relatif ini supaya jika pengguna skala halaman atau meningkatkan saiz teks, anda boleh mendapatkan skalabilitas yang lebih baik. Sebagai contoh, apabila saya mengubah saiz menggunakan unit EM, titik putus utama di atas adalah seperti berikut.

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

Soalan Lazim Mengenai Pertanyaan Media CSS dan Breakpoints (FAQ)

Apakah amalan terbaik untuk menetapkan titik putus CSS?

CSS Breakpoints adalah penting untuk membuat reka bentuk responsif. Mereka membenarkan susun atur untuk berubah pada titik yang telah ditetapkan, iaitu memberikan susun atur yang berbeza untuk saiz skrin yang berbeza. Amalan terbaik untuk menetapkan titik putus CSS termasuk bermula dengan susun atur yang bergerak terlebih dahulu dan kemudian bekerja ke atas langkah demi langkah. Ia juga disyorkan untuk menggunakan unit EM atau REM dan bukannya piksel sebagai titik putus, kerana mereka lebih fleksibel dan mudah diakses. Akhirnya, elakkan menggunakan terlalu banyak titik putus. Melekat pada saiz standard untuk peranti mudah alih, tablet dan desktop.

Bagaimana menggunakan pertanyaan media CSS untuk reka bentuk responsif?

pertanyaan media CSS adalah alat yang berkuasa untuk membuat reka bentuk responsif. Mereka membolehkan anda menggunakan gaya yang berbeza untuk peranti yang berbeza dengan saiz skrin yang berbeza. Anda boleh menggunakannya dalam CSS menggunakan peraturan @media, ciri -ciri media seperti max-width atau min-width, dan gaya CSS yang anda mahu memohon.

Apakah titik putus CSS standard untuk reka bentuk responsif?

Breakpoints CSS standard untuk reka bentuk responsif biasanya seperti berikut: 320px untuk peranti mudah alih, 768px untuk tablet, 1024px untuk tablet dan 1200px untuk desktop besar. Walau bagaimanapun, ini bukan peraturan tegar dan boleh diselaraskan mengikut keperluan khusus reka bentuk.

Bagaimana untuk menguji titik putus CSS saya?

Anda boleh menggunakan alat semak dalam penyemak imbas anda untuk menguji titik putus CSS anda. Alat ini membolehkan anda mensimulasikan saiz skrin yang berbeza dan melihat bagaimana susun atur anda bertindak balas. Di samping itu, anda boleh menggunakan alat dalam talian seperti BrowserStack atau laman web ujian reka bentuk yang responsif untuk menguji pada peranti dan resolusi skrin yang berbeza.

Bolehkah saya menggunakan pertanyaan media CSS untuk mencari peranti tertentu?

Ya, anda boleh menggunakan pertanyaan media CSS untuk mencari peranti tertentu. Walau bagaimanapun, ini biasanya tidak disyorkan kerana ia boleh membawa kepada mimpi buruk penyelenggaraan. Sebaliknya, fokus pada mewujudkan reka bentuk responsif yang berfungsi untuk semua saiz skrin.

Bagaimana untuk menukar saiz fon menggunakan pertanyaan media CSS?

Anda boleh menggunakan pertanyaan media CSS untuk menukar saiz fon berdasarkan saiz skrin. Sebagai contoh, anda mungkin mahu menambah saiz fon ke skrin yang lebih besar untuk kebolehbacaan yang lebih besar. Anda boleh melakukan ini dengan menentukan pertanyaan media dengan saiz skrin yang dikehendaki dan kemudian menetapkan saiz fon baru.

Apakah perbezaan antara min-width dan max-width dalam pertanyaan media CSS?

dan min-width dalam max-width dalam pertanyaan media CSS merujuk kepada saiz viewport minimum dan maksimum yang gaya dalam pertanyaan media akan dikenakan. min-width digunakan untuk menggunakan gaya ke mana -mana saiz viewport yang lebih besar daripada nilai yang ditentukan, manakala max-width digunakan untuk menggunakan gaya ke mana -mana saiz viewport kurang daripada atau sama dengan nilai yang ditentukan.

Bolehkah saya menggunakan pertanyaan media CSS dengan JavaScript?

Ya, anda boleh menggunakan kaedah window.matchMedia() untuk menggunakan pertanyaan media CSS dengan JavaScript. Kaedah ini mengembalikan objek MediaQueryList yang mewakili hasil rentetan pertanyaan media CSS yang ditentukan, yang kemudiannya boleh digunakan untuk memohon ciri JavaScript yang berbeza berdasarkan saiz skrin.

Bagaimana menggunakan pertanyaan media CSS untuk memproses skrin resolusi tinggi?

Anda boleh menggunakan ciri media resolusi untuk memproses skrin resolusi tinggi menggunakan pertanyaan media CSS. Ciri ini membolehkan anda menggunakan gaya berdasarkan kepadatan piksel skrin. Sebagai contoh, anda mungkin ingin memberikan imej resolusi yang lebih tinggi untuk skrin berkepadatan tinggi untuk memastikan mereka kelihatan tajam dan tajam.

Bolehkah saya menggunakan pertanyaan media CSS untuk mengesan mod gelap?

Ya, anda boleh menggunakan pertanyaan media CSS untuk mengesan jika pengguna telah menetapkan sistem mereka ke mod gelap. Anda boleh menggunakan ciri media prefers-color-scheme untuk mencapai matlamat ini. Ciri ini membolehkan anda menggunakan gaya yang berbeza mengikut skema warna pilihan pengguna (iaitu, warna cahaya atau gelap).

Atas ialah kandungan terperinci Atoz CSS: Membuat reka bentuk responsif dengan pertanyaan media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!