CSS Media spørringer: trinnvis beskrivelse, funksjoner og vurderinger

Det var en gang, de som besøker nettstedene til smarttelefoner og lignende enheter som forårsaker andre bare ler. Mange rett og slett ikke kunne forstå hvorfor dette er nødvendig, fordi det er en så behagelig stasjonære datamaskiner! Eller, i verste fall, bærbare datamaskiner. I tillegg mobilt internett så var dyrt.

Tiden gikk. Internett ble billigere. Salget kom ut flere og flere telefoner og tabletter. En tid senere, eierne av populære nettsteder forundret klødde seg i hodet. Ifølge statistikk, viste det seg at deres ressurser er mer sannsynlig å besøke sine smarttelefoner enn med en stasjonær PC!

På den tiden de områder som ikke er optimalisert for visning på mobile enheter. Kommer til det gamle livet på telefonen, ville du må være fornøyd med små bokstaver, små menyvalg og knapper ubehagelig.

Ankomsten av CSS Media spørringer

Det var behov for å pålegge ressurser slik at de ser bra ut sett fra hvilken som helst skjerm. Først spre praksisen med å etablere separate områder for hver størrelse. For eksempel besøkende som bruker en mobiltelefon, får du på en ressurs, og en som er "sitter" med datamaskinen - på den andre. Men det var en lang, kostbar og upraktisk.

Så kom CSS3 Media spørringer. Med dem kom bare muligheten for implementering av dynamisk design.

Hva er dynamisk design?

Dette begrepet brukes om utseendet ressursen endres i henhold til størrelsen på skjermen som den leser. Hvordan å forstå dette? Det er enkelt.

Tenk deg at du har et nettsted. I den øvre delen er det en navigasjonsmeny. Horisontalt. Den strekker seg over hele bredden av siden. Nedenfor som er en blokk med kontaktinformasjon. Telefon og adresse også adskilt av to blokker, og er anordnet horisontalt ved siden av hverandre. Under denne blokken - hovedinnholdet, og på venstre eller høyre sidepanelet. Nedenfor, som vanlig, bunntekst.

Denne "klassiske" layout diagram. Det er perfekt for en personlig datamaskin, men ikke altfor lettvint for mobiltelefoner. Horisontale menyen er for bred. Kontakter er plassert langt fra hverandre. Å bruke informasjon fra sidepanelet og alle blir nødt til å rulle på skjermen, og det er ikke til alles smak.

Problemet kan løses ved bruk av en adaptiv og mobile enheter med CSS3 mediespørringer. Ved å bruke mediespørringer, rekonstruere vi plasseringen av innholdet ... Nå fungerer det slik:

• toppen - enhet med vertikale navigasjonsmeny;
• under den - blokken med kontakter, som nå også plassert vertikalt;
• Sidestolpen innhold er ikke vist på siden av kodeinnholdet, og over det.

Dette er et enkelt eksempel på hva som kan gjøres med Responsive Web Design Media spørringer. Faktisk mye flere muligheter.

Så hva er medie søk?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Under CSS Media spørringer CSS3 forstår begrepet modul, som du kan gjøre innholdet på siden for å tilpasse seg visse vilkår. For eksempel, begynner det å svare på skjermstørrelsen, eller orientering enhet (stående / liggende).

Som systemet forstår at behovet for å endre innholdet? Den bruker mediespørringer. De oppgir visse parametre. Hvis en enhet som en besøkende kom til stedet oppfyller disse parametrene, inkludert pre-reseptbelagte stiler. De kan skrives som en total CSS bord, eller i en egen fil.

CSS Media spørringer Browser kompatibilitet

Safari до Chrome. Alle moderne nettlesere støtter denne teknologien, fra Safari til Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Selvfølgelig, brukere av eldre versjoner av Internet Explorer har et problem ... men la oss innse det ærlig - de som fortsatt bruker eldre IE, omtrent alt kan forårsake problemer.

Syntax adaptive oppsettet Media spørringer

html. Kanskje du har vært utsatt for mediespørringer når den er koblet filen stil til html. Husk at linjen? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // område /article/320575/%E2%80%99style.css%E2%80%99%3E Noen ganger ved enden legger en annen parameter, som så ut som: media = 'skjerm'.

Dette er en media spørring! Han indikerer at den angitte stilen filen vil fungere på enheter utstyrt med TV. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. I stedet kan du angi silketrykk - i dette tilfellet er stiler av filen brukes, hvis siden er skrevet ut.

Du kan bruke følgende attributter:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; alle - universell versjon, som brukes av stillhet, er brukt i alle tilfeller;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - skjermer (datamaskiner, bærbare datamaskiner, tabletter, smarttelefoner, og alt som er utstyrt med et display);
• принтеры; print - Skrivere,
• – проекторы; projeksjon - projektor;
• – речевые браузеры; tale - talelesere;
• – для устройств для слабовидящих; blindeskrift - anordninger for synshemmede;
• – для экранов телевизоров. tv - for TV-skjermer.

Det er ikke alt. , но они используются редко. Det er flere andre CSS Media spørringer attributter, men de blir sjelden brukt. all. I tillegg trenger du ikke angi et parameter - standard på alle.

Strukturen av medieforespørslene

css. I stedet for å skape en stil-fil, kan du bruke css kode. Det ser ut som dette:

(тут будут стили } @media skjerm og (max-bredde: 1024) {( det er stiler}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Etter @media direktiv som gjør det klart at media spørringen skal brukes, er det en indikasjon på typen av enhet (skjerm - skjermen) og ytterligere parametere. Max Width. I dette eksempelet bruker CSS Media spørringer Max Bredde eiendom. px. Dette betyr at stilene oppført i bukseseler vil være involvert, hvis brukeren av skjermstørrelsen på enheten enn 1024 piksler. и and не обязательны. Skjermen og og ikke bindende. Du kan skrive dette:

@media (max-bredde: 1024) {}

I et slikt tilfelle, egenskapene som skal brukes på hvilken som helst enhet, ikke bare de som er utstyrt med TV.

Å spesifisere flere parametere

Tenk deg at du ønsker å begrense omfanget av flere enheter som skal brukes til å velge den stilen. px, но не больше 500 px. La oss si at du ønsker å vise egenskapene til bare de som besøker nettstedet ditt fra en smarttelefon, er skjermstørrelsen ikke mindre enn 320 px, men ikke mer enn 500 px. I et slikt tilfelle foregår forespørselen formen:

@media (min-bredde: 320) og (max-bredde: 500 piksler) {}

and. Hvis du er kjent med programmering, NJ vet du hva operatøren er brukt og. For de som ikke vet: sjekker det hvis begge betingelsene er oppfylt. E. Aktivering egenskaper i spørreskjermen bør ikke være mindre enn 320 og ikke mer enn 500 piksler.

and не ограничивается одним. Og antall operatører ikke er begrenset til én. Du kan sette dem så mye du vil. For eksempel prøve å skape en viss størrelse skjermer for smarttelefoner og ganske annerledes - for TVer.

Et viktig poeng - orienteringen av brukerenheten. Noen surfer nettsteder på smarttelefonen i stående retning, noen - med landskapet. orientation:portrait, для вторых, соответственно, orientation:landscape. For det første, vil du trenge en ekstra tilstand orientering: portrett, for det andre, henholdsvis orientering: landskapet. @media. Disse linjene er også vist i parentes etter @media team. and. Du kan dele dem via og.

En annen interessant nyanse. and вы вполне можете использовать оператор or. I stedet, og du kan godt bruke eller operatør. Han trenger minst en betingelse i anmodningen til å være sant! For eksempel:

) {} @media (max-bredde: 500 piksler) eller (orientering: stående) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Hvis skjermen er mindre enn 500 px eller bruk stående retning, vil bukseseler ta effekt stiler.

Søkeord ikke for finjustering

not. Mediene spørring, kan du sette inn ordet ikke. Dette gjøres på følgende måte:

@media (ikke max-bredde: 700 piksler )} {

Egenskaper er aktivert dersom den maksimale bredde ikke er lik 700 piksler.

media funksjoner

Spørringene kan brukes flere pre-etablert funksjoner. W3C. Gjør deg kjent med alt du kan på nettet W3C. De fleste programmerere nok til å eie de tre viktigste:

• (о нем мы уже говорили); orientering (vi allerede snakket om det);
• (ширина, ее тоже упоминали); bredde (bredde, er det også nevnt);
• (высота). høyde (høyde).

Høyde er sjelden brukt, men det er noen tilfeller der denne innstillingen kan være nyttig.

Hvordan og hvor du vil plassere forespørsler?

Mange webdesignere liksom sette dem til slutten av filen stiler. For eksempel, viser første hovedstiler, og deretter, i bunnen av dokumentet som er lagt inn forespørsler.

Dette er ikke veldig bra. Mye mer praktisk å plassere egenskaper for ulike enheter rett etter de viktigste stiler. For eksempel, har du en div, som satte den røde skriftfarge:

div {

color: red;

}

Umiddelbart etter anmodning angir:

@media (min-bredde: 320 piksler) {}

Foreskriver egenskaper.

En slik tilnærming vil være tungvint hvis du bruker "ren» css. Til hjelp av preprosessor. De har en rekke interessante muligheter for mer nøyaktige applikasjonsforespørsler.

Et annet alternativ - å plassere egenskaper for ulike enheter i forskjellige stil-filer. Dette er spesielt nyttig hvis du bruker en preprosessor direktiv for å importere. Resultatet er en lett å redigere, ren kode.

Hvilken du vil bruke? Det hele avhenger av personlige preferanser og kjennetegn ved lag. Kanskje, i stedet for arbeidet har en viss måte å plassere mediespørringer vil bli akseptert.

Også ikke glem at du kan forenkle livet ditt med den nyeste programvaren. Det er ikke bare om preprosessor. Med Gulp Gruppe CSS Media spørringer kan gjøre prosessen mye enklere. Anbefales å mestre dette verktøyet eller noen av dets analoger.