Komputer, Pengaturcaraan
CSS Media Queries: langkah demi langkah penerangan, ciri-ciri dan ulasan
Pada suatu masa dahulu, orang-orang yang melawat laman web untuk telefon pintar dan peranti mudah alih yang sama yang menyebabkan orang lain hanya ketawa. Ramai hanya tidak faham mengapa ini adalah perlu, kerana ada apa-apa komputer meja yang selesa! Atau, paling teruk, komputer riba. Di samping itu, Internet mudah alih itu adalah mahal.
Masa berlalu. Internet menjadi lebih murah. jualan keluar lebih dan lebih telefon dan tablet. Beberapa ketika kemudian, pemilik laman web popular hairan menggaru kepalanya. Menurut statistik, ia kelihatan bahawa sumber-sumber mereka lebih cenderung untuk melawat telefon pintar mereka daripada dengan PC bergerak!
Pada masa itu dengan laman web yang tidak untuk ditunjukkan di peranti mudah alih. Akan hidup lama di telefon anda, anda akan perlu berpuas hati dengan huruf kecil, item menu kecil dan butang yang tidak selesa.
Kemunculan CSS Media Pertanyaan
Terdapat keperluan untuk mengenakan sumber supaya mereka kelihatan baik apabila dilihat dari mana-mana skrin. Pertama menyebarkan amalan mewujudkan tapak berasingan bagi setiap saiz. Sebagai contoh, pengunjung yang menggunakan telefon bimbit, anda akan mendapat satu sumber, dan satu yang "duduk" dengan komputer anda - di pihak yang lain. Tetapi ia adalah yang panjang, mahal dan menyusahkan.
Kemudian datang CSS3 Media Pertanyaan. Dengan mereka datang kemungkinan semata-mata pelaksanaan reka bentuk dinamik.
Apa yang reka bentuk dinamik?
Istilah ini digunakan jika kehadiran sumber berubah mengikut saiz skrin di mana ia menyemak imbas. Bagaimana untuk memahami perkara ini? Ia adalah mudah.
Bayangkan bahawa anda mempunyai laman web. Di bahagian atasnya terdapat menu navigasi. Mendatar. Ia berkuasa atas seluruh lebar halaman. Di bawah yang satu blok dengan maklumat kenalan. Telefon dan alamat juga dijarakkan oleh dua blok dan diletakkan tersusun bersebelahan antara satu sama lain. Di bawah blok ini - kandungan utama, dan di sebelah kiri atau kanan adalah bar sisi. Di bawah, seperti biasa, footer.
Ini gambarajah susun atur "klasik". Ia adalah sesuai untuk komputer peribadi, tetapi tidak terlalu sesuai untuk telefon bimbit. menu mendatar adalah terlalu luas. Kenalan terletak jauh antara satu sama lain. Untuk menggunakan maklumat daripada bar sisi dan semua akan mempunyai untuk menatal skrin, dan ia bukan untuk rasa semua orang.
Masalah ini boleh diselesaikan dengan menggunakan reka bentuk penyesuaian dan mudah alih dengan CSS3 Media Pertanyaan. Dengan menggunakan pertanyaan media, kita membina semula lokasi kandungan ... Sekarang ia berfungsi seperti ini:
- atas - unit dengan menu navigation menegak;
- di bawahnya - blok dengan kenalan, yang kini juga diletakkan secara menegak;
- kandungan sidebar tidak dipaparkan di sebelah
kandungan tag, dan di atasnya.
Ini adalah contoh yang mudah dari apa yang boleh dilakukan dengan Web Design responsif Media Pertanyaan. Malah banyak lagi kemungkinan.
Jadi apakah pertanyaan media?
понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Di bawah CSS Media Queries CSS3 memahami modul jangka masa, yang anda boleh membuat kandungan halaman tersebut untuk menyesuaikan diri dengan keadaan tertentu. Sebagai contoh, ia mula bertindak balas kepada saiz skrin, atau peranti orientasi (potret / landskap).
Sebagai sistem memahami bahawa keperluan untuk menukar kandungan? Ia menggunakan pertanyaan media. Mereka menentukan parameter tertentu. Jika peranti yang pengunjung datang ke laman web memenuhi parameter ini, termasuk gaya pra-preskripsi. Ia boleh ditulis sebagai jumlah Rajah CSS, atau dalam fail yang berasingan.
CSS Media Queries Keserasian Pelayar
Safari до Chrome. Semua pelayar moden menyokong teknologi ini, dari Safari untuk Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Sudah tentu, pengguna versi yang lebih lama Internet Explorer mempunyai masalah ... tetapi mari kita menghadapinya jujur - mereka yang masih menggunakan lebih tua IE, hanya kira-kira apa-apa yang boleh menyebabkan masalah.
Syntax susun atur penyesuaian Media Pertanyaan
html. Mungkin anda telah terdedah kepada pertanyaan media apabila disambungkan fail gaya untuk html. Ingat baris itu? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'.
Ini adalah pertanyaan media! Dia menunjukkan bahawa fail gaya yang dinyatakan akan bekerja pada peranti yang dilengkapi dengan TV. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Sebaliknya, anda boleh menentukan print skrin - dalam kes ini, gaya fail digunakan, jika halaman yang dicetak.
Anda boleh menggunakan ciri-ciri berikut:
- – универсальный вариант, используется по молчанию, применяется во всех случаях; semua - versi universal, yang digunakan oleh kesunyian, digunakan dalam semua kes;
- – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - skrin (komputer, komputer riba, tablet, telefon pintar, dan semua yang dilengkapi dengan paparan a);
- принтеры; cetak - Printers;
- – проекторы; unjuran - projektor;
- – речевые браузеры; Pelayar suara - ucapan;
- – для устройств для слабовидящих; braille - peranti untuk cacat penglihatan;
- – для экранов телевизоров. tv - untuk skrin TV.
Bukan itu sahaja. , но они используются редко. Terdapat beberapa CSS tambahan Media Queries sifat-sifat, tetapi mereka jarang digunakan. all. Di samping itu, anda tidak menentukan parameter - Default pada semua.
Struktur pertanyaan media
css. Bukannya mencipta fail gaya, anda boleh menggunakan kod css. Ia kelihatan seperti ini:
(тут будут стили } skrin @media dan (max-width: 1024px) {( ada gaya}
@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Selepas arahan @media, yang menjadikan ia jelas bahawa pertanyaan media yang digunakan, terdapat petunjuk daripada jenis peranti (skrin - skrin) dan parameter tambahan. Max Width. Dalam contoh ini, menggunakan harta CSS Media Queries Max Lebar. px. Ini bermakna bahawa gaya disenaraikan dalam penyokong gigi akan terlibat, jika pengguna saiz skrin peranti daripada 1024 px. и and не обязательны. Skrin dan dan tidak mengikat. Anda boleh menulis ini:
@media (max-width: 1024px) {}
Dalam kes seperti itu, sifat-sifat yang akan digunakan pada mana-mana peranti, bukan hanya mereka yang dilengkapi dengan TV.
Menyatakan berbilang parameter
Katakan anda mahu untuk menghadkan julat beberapa peranti yang akan digunakan untuk memilih gaya. px, но не больше 500 px. Katakan anda mahu untuk menunjukkan sifat-sifat hanya mereka yang melawat laman web anda dari telefon pintar, saiz skrin tidak kurang daripada 320 px, tetapi tidak lebih daripada 500 px. Dalam kes sedemikian, permintaan itu mengambil bentuk:
@media (min-lebar: 320px) dan (max-width: 500px) {}
and. Jika anda sudah biasa dengan pengaturcaraan, anda Nj tahu apa operator digunakan dan. Bagi mereka yang tidak tahu: ia memeriksa jika kedua-dua keadaan adalah benar. sifat E. Pengaktifan dalam skrin pertanyaan hendaklah tidak kurang daripada 320 dan tidak lebih daripada 500 piksel.
and не ограничивается одним. Dan beberapa pengusaha tidak terhad kepada satu. Anda boleh meletakkan mereka seberapa banyak yang anda mahu. Sebagai contoh, cuba untuk mewujudkan skrin saiz tertentu untuk telefon pintar dan agak berbeza - untuk TV.
Satu perkara penting - orientasi peranti pengguna. Seseorang yang melayari laman web pada telefon pintar anda dalam orientasi potret, seseorang - dengan landskap. orientation:portrait, для вторых, соответственно, orientation:landscape. Bagi bekas, anda akan memerlukan satu keadaan orientasi tambahan: potret, bagi kedua, masing-masing, orientasi: landskap. @media. ayat-ayat ini juga ditunjukkan dalam kurungan berikut pasukan @media. and. Anda boleh berkongsi mereka melalui dan.
Satu lagi nuansa menarik. and вы вполне можете использовать оператор or. Sebaliknya, dan anda juga boleh menggunakan atau pengendali. Dia memerlukan sekurang-kurangnya satu syarat dalam permintaan itu adalah benar! Sebagai contoh:
) {} @media (max-width: 500px) atau (orientasi: potret) {}
px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Jika skrin adalah kurang daripada 500 px atau penggunaan orientasi potret, pendakap akan mengambil gaya kesan.
tidak kata kunci untuk penalaan halus
not. Media pertanyaan, anda boleh memasukkan perkataan tidak. Ini dilakukan seperti berikut:
@media (tidak max-width: 700px ) {}
Properties diaktifkan jika lebar maksimum tidak sama dengan 700 piksel.
ciri-ciri media
Pertanyaan boleh digunakan beberapa fungsi pra-ditubuhkan. W3C. Biasakan diri anda dengan semua yang anda boleh dalam talian W3C. Kebanyakan coders cukup untuk memiliki tiga utama:
- (о нем мы уже говорили); Orientasi (kami telah bercakap tentang perkara ini);
- (ширина, ее тоже упоминали); lebar (lebar, ia juga menyebut);
- (высота). height (tinggi).
Ketinggian jarang digunakan, tetapi terdapat beberapa kes di mana tetapan ini boleh menjadi berguna.
Bagaimana dan di mana untuk meletakkan permintaan?
Ramai pereka web entah bagaimana meletakkan mereka ke akhir gaya fail. Sebagai contoh, yang pertama menyenaraikan gaya utama, dan kemudian, di bahagian bawah dokumen itu, diletakkan permintaan.
Ini tidak begitu baik. Lebih mudah untuk meletakkan hartanah untuk peranti yang berlainan selepas gaya yang utama. Sebagai contoh, anda mempunyai div, yang menetapkan warna font merah:
div {
warna: merah;
}
Sejurus selepas permintaan itu menunjukkan:
@media (min-lebar: 320px) {}
Menetapkan hartanah.
Pendekatan sedemikian akan menjadi rumit jika anda menggunakan "tulen» css. Untuk bantuan prapemproses itu. Mereka mempunyai banyak peluang yang menarik untuk permintaan permohonan yang lebih tepat.
Satu lagi pilihan - meletakkan hartanah untuk peranti yang berlainan dalam fail gaya yang berbeza. Ini amat berguna jika anda menggunakan arahan prapemproses import. Hasilnya adalah mudah untuk mengedit, kod bersih.
Mana satu untuk digunakan? Ia semua bergantung kepada pilihan peribadi dan ciri-ciri pasukan. Mungkin, di tempat kerja anda akan telah mengamalkan cara tertentu meletakkan pertanyaan media.
Juga jangan lupa bahawa anda boleh memudahkan kehidupan anda dengan perisian terkini. Ia tidak hanya kira-kira prapemproses itu. Dengan Gulp Group CSS Media Queries boleh membuat proses lebih mudah. Disyorkan untuk menguasai alat ini atau mana-mana analognya.
Similar articles
Trending Now