CSS Media frågor: steg för steg beskrivning, funktioner och recensioner

En gång i tiden, för dem som besöker webbplatser smartphones och liknande mobila enheter som orsakar andra bara skrattar. Många kunde helt enkelt inte förstå varför det är nödvändigt, eftersom det finns en bekväm stationära datorer! Eller, i värsta fall, bärbara datorer. Dessutom mobilt Internet sedan var dyrt.

Tiden gick. Internet blev billigare. Försäljningen kom ut fler och fler telefoner och surfplattor. En tid senare, ägare av populära webbplatser förbryllade kliade sig i huvudet. Enligt statistiken, visade det sig att deras resurser är mer benägna att besöka sina smartphones än med en stationär dator!

På den tiden platserna inte har optimerats för visning på mobila enheter. Gå till det gamla livet på telefonen, skulle du behöva nöja sig med små bokstäver, små menyalternativ och knappar obekväma.

Tillkomsten av CSS Media frågor

Det fanns ett behov av att införa resurser så att de ser bra ut när de ses från vilken skärm som helst. Först spred bruket att fastställa separata platser för varje storlek. Till exempel besökare som använder en mobiltelefon, får du på en resurs, och en som "sitter" med datorn - på den andra. Men det var en lång, dyr och obekväm.

Sedan kom CSS3 Media frågor. Med dem kom enbart möjligheten att genomförandet av dynamisk design.

Vad är dynamisk design?

Denna term används om utseende av resursen ändras beroende på storleken på skärmen som den surfar. Hur man förstå detta? Det är enkelt.

Tänk dig att du har en webbplats. I dess övre del finns en navigeringsmeny. Horisontell. Det sträcker sig över hela bredden på sidan. Därunder är ett block med kontaktinformation. Telefon och adress på avstånd även av två block och är anordnade horisontellt intill varandra. Under detta block - det huvudsakliga innehållet och på vänster eller höger är sidofältet. Nedan som vanligt, sidfot.

Detta "klassiska" layout diagram. Det är perfekt för en dator, men inte alltför bekvämt för mobiltelefoner. Horisontell meny är för bred. Kontakterna ligger långt från varandra. Om du vill använda informationen från sidofältet och alla kommer att behöva rulla skärmen, och det är inte allas smak.

Problemet kan lösas genom att använda en adaptiv och mobil design med CSS3 Media frågor. Genom att använda media frågor, vi rekonstruera placeringen av innehåll ... Nu är det fungerar så här:

• top - enhet med vertikala navigeringsmenyn;
• enligt det - blocket med kontakter, som nu också placerade vertikalt;
• sidebar innehåll visas inte på sidan av tag innehåll och ovanför den.

Detta är ett enkelt exempel på vad som kan göras med Responsive Web Design Media frågor. I själva verket en mycket mer möjligheter.

Så vad är mediafrågor?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Under CSS Media frågor CSS3 förstår termen modulen med vilken du kan göra innehållet på sidan för att anpassa sig till vissa villkor. Till exempel, det börjar att svara på skärmstorlek, eller Orienteringsanordning (stående / liggande).

Eftersom systemet förstår att det är nödvändigt att ändra innehållet? Den använder media frågor. De anger vissa parametrar. Om en enhet som en besökare kom till platsen uppfyller dessa parametrar, inklusive pre-recept stilar. De kan skrivas som en total CSS bord eller i en separat fil.

CSS Media frågor webläsare

Safari до Chrome. Alla moderna webbläsare stöder denna teknik, från Safari till Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Naturligtvis använder äldre versioner av Internet Explorer har ett problem ... men låt oss inse det ärligt - de som fortfarande använder äldre IE, precis vad som helst kan orsaka problem.

Syntax adaptiv layout Media frågor

html. Kanske du har varit utsatt för mediafrågor när den är ansluten stilen filen till html. Kom ihåg att linjen? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // site /article/320575/%E2%80%99style.css%E2%80%99%3E Ibland i slutet lägger en annan parameter, som såg ut som: media = 'screen'.

Detta är en mediafråga! Han anger att det angivna formatet filen kommer att fungera på enheter är utrustade med TV-apparater. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Istället kan du ange screentryck - i detta fall, är stilar av filen tillämpas om sidan skrivs ut.

Du kan använda följande attribut:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; alla - universal version, som används av tystnad, tillämpas i samtliga fall;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - skärmar (datorer, bärbara datorer, tabletter, smartphones, och allt som är utrustad med en display);
• принтеры; print - Skrivare,
• – проекторы; projektion - projektor;
• – речевые браузеры; tal - tal webbläsare;
• – для устройств для слабовидящих; blindskrift - anordningar för synskadade;
• – для экранов телевизоров. tv - för TV-skärmar.

Det är inte allt. , но они используются редко. Det finns flera ytterligare CSS Media frågor attribut, men de används sällan. all. Dessutom behöver du inte ange en parameter - standard på alla.

Strukturen på de mediafrågor

css. Istället för att skapa en stil fil kan du använda css-kod. Det ser ut så här:

(тут будут стили } @media skärm och (max-bredd: 1024px) {( det finns stilar}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Efter @media direktiv, som gör det klart att det media fråga används, det finns en indikation av typen av anordning (skärm - skärmen) och ytterligare parametrar. Max Width. I det här exemplet använda fastigheten CSS Media Frågor Max bredd. px. Detta innebär att stilar som anges i hängslen kommer att delta, om användaren av enheten skärmstorlek än 1024 px. и and не обязательны. Skärm och och inte bindande. Du kan skriva så här:

@media (max-bredd: 1024px) {}

I ett sådant fall, de egenskaper användas på alla enheter, inte bara de som är utrustade med TV.

Ange flera parametrar

Anta att du vill begränsa utbudet av flera enheter som ska användas för att välja stil. px, но не больше 500 px. Låt oss säga att du vill visa egenskaperna för endast de som besöker din webbplats från en smartphone, är bildstorleken inte är mindre än 320 px, men inte mer än 500 px. I ett sådant fall tar begäran formen:

@media (min-bredd: 320 x) och (max-bredd: 500px) {}

and. Om du är bekant med programmering, NJ du vet vad operatören tillämpas och. För dem som inte vet: kontrollerar det om båda villkoren är sanna. E. Aktivering fastigheter i frågeskärmen ska inte vara mindre än 320 och högst 500 pixlar.

and не ограничивается одним. Och antalet operatörer inte är begränsat till ett. Du kan sätta dem lika mycket som du vill. Prova till exempel att skapa en viss storlek skärmar för smartphones och helt annorlunda - för TV-apparater.

En viktig punkt - orientering användaranordningen. Någon surfar webbplatser på din smartphone i stående orientering, någon - med landskapet. orientation:portrait, для вторых, соответственно, orientation:landscape. För de förstnämnda, behöver du ytterligare ett villkor orientering: stående, för det andra, respektive, orientering: landskap. @media. Dessa linjer visas också inom parentes efter @media laget. and. Du kan dela dem via och.

En annan intressant nyans. and вы вполне можете использовать оператор or. Istället och du kan mycket väl använda eller operatören. Han behöver åtminstone ett villkor i begäran för att vara sant! Till exempel:

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

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Om skärmen är mindre än 500 px eller användning stående orientering, kommer hängslen träda i kraft stilar.

inte sökord för finjustering

not. Medierna fråga, kan du infoga ordet inte. Detta sker på följande sätt:

@media (ej max-bredd: 700px ) {}

Egenskaper aktiveras om den maximala bredden är inte lika med 700 pixlar.

media funktioner

Frågorna kan användas flera förutbestämda funktioner. W3C. Bekanta dig med allt du kan på nätet W3C. De flesta kodare nog att äga de tre viktigaste:

• (о нем мы уже говорили); orientering (vi redan talat om det);
• (ширина, ее тоже упоминали); bredd (bredd, är det också nämns);
• (высота). höjd (höjd).

Höjd används sällan, men det finns några fall där den här inställningen kan vara användbara.

Hur och var att placera önskemål?

Många webbdesigners på något sätt sätta dem till slutet av filen stilar. Till exempel den första listar de viktigaste stilar, och sedan i botten av dokumentet placerade förfrågningar.

Detta är inte bra. Mycket mer praktiskt att placera egenskaper för olika enheter direkt efter huvud stilar. Till exempel har du div, som satte den röda font color:

div {

färg: röd;

}

Omedelbart efter det att begäran visar:

@media (min-bredd: 320 x) {}

Föreskriver egenskaper.

Ett sådant tillvägagångssätt skulle vara besvärligt om du använder "ren» css. Till hjälp av preprocessor. De har en hel del intressanta möjligheter för mer exakt ansökan förfrågningar.

Ett annat alternativ - att placera egenskaper för olika enheter i olika stil filer. Detta är särskilt användbart om du använder ett direktiv preprocessor att importera. Resultatet är ett lätt att redigera, ren kod.

Vilken som skall användas? Det beror helt på personliga preferenser och egenskaper i teamet. Kanske i stället för ditt arbete har ett visst sätt att placera mediafrågor kommer att accepteras.

Också glöm inte att du kan förenkla ditt liv med den senaste programvaran. Det handlar inte bara om förprocessorn. Med Gulp Group CSS Media frågor kan göra processen mycket enklare. Rekommenderas att bemästra detta verktyg eller någon av dess analoger.