CSS Media forespørgsler: trin for trin beskrivelse, features og anmeldelser

Engang, dem, der besøger hjemmesider til smartphones og lignende mobile enheder, der forårsager andre kun griner. Mange kunne simpelthen ikke forstå, hvorfor det er nødvendigt, fordi der er sådan en komfortabel stationære computere! Eller i værste fald laptops. Hertil kommer, det mobile internet så var dyrt.

Tiden gik. Internettet blev billigere. Salget kom ud flere og flere telefoner og tabletter. Nogen tid senere, ejerne af populære websteder forundret skrabe hans hoved. Ifølge statistikker, viste det sig, at er mere tilbøjelige til at besøge deres smartphones end med en stationær pc deres ressourcer!

På det tidspunkt de steder ikke er blevet optimeret til visning på mobile enheder. At gå til det gamle liv på telefonen, ville du nødt til at være tilfreds med små bogstaver, små menupunkter og knapper ubehagelige.

Fremkomsten af CSS Media Forespørgsler

Der var et behov for at pålægge ressourcer, så de ser godt ud, når den ses fra enhver skærm. Først sprede praksis for at etablere særskilte websteder for hver størrelse. For eksempel, besøgende, der bruger en mobiltelefon, du får på en ressource, og en, der er "sidder" med computeren - på den anden. Men det var en lang, dyr og upraktisk.

Så kom CSS3 Media Forespørgsler. Med dem kom den blotte mulighed for gennemførelsen af dynamisk design.

Hvad er dynamisk design?

Dette udtryk bruges, hvis udseendet af ressourcen skifter i forhold til størrelsen af skærmen, som den browsing. Sådan at forstå dette? Det er simpelt.

Forestil dig, at du har en hjemmeside. I den øverste del er der en navigationsmenu. Vandret. Det strækker sig over hele bredden på siden. Nedenfor dette er en blok med kontaktoplysninger. Telefon og adresse også adskilt af to blokke og er anbragt horisontalt ved siden af hinanden. Under denne blok - hovedindholdet, og på den venstre eller højre er sidebjælken. Nedenfor, som sædvanlig, sidefoden.

Denne "klassiske" layout diagram. Det er perfekt til en personlig computer, men ikke alt for bekvemt for mobiltelefoner. Vandret menu er for bred. Kontakter er placeret langt fra hinanden. Du bruger oplysninger fra sidelinjen og alle bliver nødt til at rulle skærmen, og det er ikke i alles smag.

Problemet kan løses ved hjælp af en adaptiv og mobil design med CSS3 Media Forespørgsler. Ved at bruge medier forespørgsler, rekonstruere vi placeringen af indholdet ... Nu virker det sådan her:

• top - enhed med lodret navigationsmenu;
• under det - blokken med kontakter, som nu også tilføjet vertikalt;
• sidebar indhold vises ikke på siden af tag indhold, og over det.

Dette er et simpelt eksempel på, hvad der kan gøres med Responsive Web Design Media Forespørgsler. Faktisk en masse flere muligheder.

Så hvad er medierne forespørgsler?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Under CSS Media Forespørgsler CSS3 forstå udtrykket modul, som du kan gøre indholdet på siden for at tilpasse visse betingelser. For eksempel, det begynder at reagere på skærmstørrelsen, eller orientering enhed (stående / liggende).

Da systemet forstår, at det er nødvendigt at ændre indholdet? Det bruger medier forespørgsler. De angive bestemte parametre. Hvis en enhed, hvorfra en besøgende kom til stedet opfylder disse parametre, herunder præ-receptpligtige stilarter. De kan skrives som en samlet CSS bord, eller i en separat fil.

CSS Media Forespørgsler Browser Kompatibilitet

Safari до Chrome. Alle moderne browsere understøtter denne teknologi, fra Safari til Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Selvfølgelig brugere af ældre versioner af Internet Explorer har et problem ... men lad os se det i øjnene ærligt - dem, der stadig bruger ældre IE, næsten alt kan forårsage problemer.

Syntaks adaptive layout Media Forespørgsler

html. Måske du har været udsat for medier forespørgsler når de er tilsluttet den stil fil til html. Husk, at linjen? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // websted /article/320575/%E2%80%99style.css%E2%80%99%3E Nogle gange i slutningen tilføjer en anden parameter, der så ud som: media = 'skærm'.

Dette er et medie forespørgsel! Han angiver, at den angivne stil fil vil arbejde på enheder udstyret med tv. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. I stedet kan du angive skærmprint - i dette tilfælde er de stilarter filen anvendes, hvis siden er udskrevet.

Du kan bruge følgende attributter:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; alle - universel udgave, der anvendes af tavshed, der anvendes i alle tilfælde;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - skærme (computere, bærbare computere, tablets, smartphones, og alle, der er udstyret med et display);
• принтеры; print - Printere,
• – проекторы; projektion - projektor;
• – речевые браузеры; tale - tale browsere;
• – для устройств для слабовидящих; braille - indretninger til synshandicappede;
• – для экранов телевизоров. tv - til TV-skærme.

Det er ikke alt. , но они используются редко. Der er flere ekstra CSS Media Forespørgsler attributter, men de er sjældent brugt. all. Hertil kommer, at man ikke angive en parameter - Normalt på alle.

Strukturen i medierne forespørgsler

css. I stedet for at skabe en stil-fil, kan du bruge css kode. Det ser således ud:

(тут будут стили } @media skærm og (max-bredde: 1024) {( der er stilarter}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Efter @media direktiv, som gør det klart, at medierne forespørgslen anvendes, der er en indikation af den type enhed (skærm - skærmen), og yderligere parametre. Max Width. I dette eksempel bruger CSS Media Forespørgsler Max Bredde ejendom. px. Det betyder, at de stilarter, der er anført i de seler vil blive inddraget, hvis brugeren af enheden skærmstørrelse end 1024 px. и and не обязательны. Skærm og og ikke bindende. Du kan skrive dette:

@media (max-bredde: 1024) {}

I et sådant tilfælde, at de egenskaber, der skal bruges på en hvilken som helst enhed, ikke kun dem, der er udstyret med tv.

Angivelse af flere parametre

Antag, at du ønsker at begrænse udvalget af flere enheder, der skal bruges til at vælge den stil. px, но не больше 500 px. Lad os sige, du ønsker at vise egenskaberne for kun dem, der besøger dit websted fra en smartphone, skærmstørrelsen ikke er mindre end 320 px, men ikke mere end 500 px. I et sådant tilfælde, anmodningen tager form:

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

and. Hvis du er fortrolig med programmering, NJ du ved, hvad operatør anvendes og. For dem, der ikke kender: kontrollerer det, hvis begge betingelser er sande. E. For at aktivere de egenskaber i forespørgslen skærm bør ikke være mindre end 320 og højst 500 pixels.

and не ограничивается одним. Og antallet af operatører er ikke begrænset til én. Du kan lægge dem så meget som du ønsker. For eksempel, forsøge at skabe en vis størrelse skærme til smartphones og helt anderledes - for tv.

Et vigtigt punkt - orienteringen af brugeranordningen. Nogen browsing websites på din smartphone i stående retning, nogen - med landskabet. orientation:portrait, для вторых, соответственно, orientation:landscape. For den førstnævnte, skal du bruge en yderligere betingelse orientering: portræt, for det andet, henholdsvis orientering: landskab. @media. Disse linjer er også vist i parentes efter @media hold. and. Du kan dele dem via og.

En anden interessant nuance. and вы вполне можете использовать оператор or. I stedet, og man kan godt bruge eller operatør. Han har brug for mindst én betingelse i anmodningen til at være sandt! For eksempel:

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

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Hvis skærmen er mindre end 500 px eller brug stående retning, vil de seler tage effekt stilarter.

Søgeord ikke for finjustering

not. Medierne forespørgsel, kan du indsætte ordet ikke. Dette gøres på følgende måde:

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

Egenskaber, aktiveres, hvis den maksimale bredde ikke er lig med 700 pixels.

medier funktioner

Forespørgslerne kan bruges flere forud fastsatte funktioner. W3C. Gør dig bekendt med alt hvad du kan online W3C. De fleste programmører nok til at eje de tre vigtigste:

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

Højde er sjældent brugt, men der er et par tilfælde, hvor denne indstilling kan være nyttige.

Hvordan og hvor du skal placere anmodninger?

Mange webdesignere eller anden måde sætte dem til slutningen af filen stilarter. For eksempel er den første viser de vigtigste stilarter, og derefter, i bunden af dokumentet, placeres anmodninger.

Det er ikke særlig god. Meget mere praktisk at placere egenskaber til forskellige enheder lige efter de vigtigste stilarter. For eksempel har du en div, der satte den røde skriftfarve:

div {

farve: rød;

}

Umiddelbart efter anmodningen angiver:

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

Foreskriver egenskaber.

En sådan fremgangsmåde ville være besværligt, hvis du bruger "ren» css. Til hjælp af præprocessoren. De har en masse interessante muligheder for mere præcise ansøgning anmodninger.

En anden mulighed - at placere egenskaber til forskellige enheder i forskellige stil-filer. Dette er især nyttigt, hvis du bruger en præprocessor direktiv til at importere. Resultatet er en nem at redigere, ren kode.

Hvilken der skal bruges? Det hele afhænger af personlige præferencer og karakteristika af holdet. Måske, i stedet for dit arbejde har en vis måde at placere medier forespørgsler vil blive accepteret.

Også glem ikke, at du kan forenkle dit liv med den nyeste software. Det handler ikke kun om præprocessoren. Med Gulp Group CSS Media Forespørgsler kan gøre processen meget lettere. Anbefales at beherske dette værktøj eller nogen af dens analoger.