CSS Media Kyselyt: askel askeleelta kuvaus, ominaisuudet ja arvostelut

Olipa kerran, niille, jotka käyvät sivustoja älypuhelimet ja vastaavanlaisiin mobiililaitteisiin, jotka aiheuttavat toiset vain nauraa. Monet yksinkertaisesti voinut ymmärtää, miksi tämä on tarpeen, koska siellä on niin mukava pöytätietokoneissa! Tai pahimmillaan läppäreissä. Lisäksi langattoman Internetin sitten oli kallista.

Aika kului. Internet halpenivat. Myynti tuli enemmän ja enemmän puhelimia ja tabletteja. Vähän myöhemmin omistajat suosittuja sivustoja ymmällään raapiminen päätään. Tilastojen mukaan näytti siltä, että niiden voimavaroja ovat todennäköisesti vierailla älypuhelimet kuin paikallaan PC!

Tuolloin sivustot eivät ole optimoitu mobiilikäyttöön. Menossa vanhan elämän puhelimen, olisit tyytymään pieniä kirjaimia, pieniä valikkokohteita ja napit epämukavaksi.

Kynnyksellä CSS mediakyselyjä

Oli tarvetta asettaa resursseja, jotta ne näyttävät hyvältä katsottuna tahansa näytöllä. Ensimmäinen levittää käytännössä sellainen eri kohtaan jokaiselle koolle. Esimerkiksi vierailijat, jotka käyttävät matkapuhelinta, saat yhden resurssin, ja joka on "istuu" tietokoneen - välillä. Mutta se oli pitkä, kallis ja hankala.

Sitten tuli CSS3 Media kyselyt. Niiden mukana tuli pelkkä mahdollisuus täytäntöönpanon dynaaminen muotoilu.

Mikä on dynaaminen muotoilu?

Tätä termiä käytetään, jos ulkonäkö resurssin mukaisesti muuttuvan näytön koko, johon se lukemassa. Miten ymmärtää tämän? Se on yksinkertaista.

Kuvittele, että sinulla on verkkosivusto. Sen yläosassa on navigointivalikko. Vaakasuora. Se ulottuu koko leveydeltä sivun. Sen alapuolella on lohko yhteystiedot. Puhelin ja osoite myös erillään kaksi lohkoa ja on järjestetty vaakasuunnassa toistensa viereen. Tämän lohko - keskeinen sisältö, ja vasemmalla tai oikealla on sivupalkissa. Alla, kuten tavallista, footer.

Tämä "klassinen" layout kaavio. Se on täydellinen henkilökohtainen tietokone, mutta ei liian kätevää matkapuhelimiin. Vaaka Menu on liian leveä. Koskettimet sijaitsevat kaukana toisistaan. Tietojen käyttämisestä sivupalkissa kaikkien täytyy vierittää näyttöä, ja se ei ole kaikkien makuun.

Ongelma voidaan ratkaista käyttämällä mukautuvaa ja mobiili muotoilu CSS3 Media kyselyt. Käyttämällä mediakyselyjen rekonstruoida sijainti sisältöä ... Nyt se toimii näin:

• top - yksikkö pystysuora navigointivalikko;
• sen alla - lohko koskettimet, jotka ovat nyt myös sijoitettu pystysuoraan;
• sivupalkin sisältö ei näy puolella
  tag sisältö, ja sen yläpuolella.

Tämä on yksinkertainen esimerkki siitä, mitä voidaan tehdä Responsive Web Design mediakyselyt. Itse asiassa paljon enemmän mahdollisuuksia.

Niin mikä on mediakyselyt?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Alle CSS Media kyselyt CSS3 ymmärtää termi moduuli, jolla voit tehdä sivun sisältöä sopeutua tiettyjä ehtoja. Esimerkiksi, se alkaa reagoida näytön koko tai suunta laite (pysty / vaaka).

Koska järjestelmä ymmärtää, että tarvetta muuttaa sisältöä? Se käyttää mediakyselyt. Niissä täsmennetään tiettyjä parametreja. Jos laite, josta kävijä tuli paikalle täyttää nämä parametrit, kuten esi-reseptiä tyylejä. Ne voidaan kirjoittaa yhteensä CSS pöydän tai erilliseen tiedostoon.

CSS mediakyselyjä Selainvaatimukset

Safari до Chrome. Kaikki nykyaikaiset selaimet tukevat tätä tekniikkaa, Safari Chromeen. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Tietenkin käyttäjät vanhempien Internet Explorer -versioiden on ongelma ... mutta Totta puhuen rehellisesti - ne, jotka ovat edelleen käytössä vanhempaa IE, juuri mitään voi aiheuttaa ongelmia.

Syntax adaptiivinen asettelu mediakyselyt

html. Ehkä olet ollut alttiina mediakyselyt kun se kytketään tyyli tiedosto html. Muista, että linja? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // site /article/320575/%E2%80%99style.css%E2%80%99%3E Joskus lopussa lisää toisen parametrin, joka näytti kuten: media = 'näyttö'.

Tämä on median kysely! Hän kertoo, että määritettyä tyyliä tiedosto toimii laitteissa, joissa on televisio. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Sen sijaan voit määrittää silkkipainatus - tässä tapauksessa tyylejä tiedoston sovelletaan, jos sivu tulostuu.

Voit käyttää seuraavia määritteitä:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; kaikki - universal-versio, jota käyttävät hiljaisuus, sovelletaan kaikissa tapauksissa;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - näytöt (tietokoneet, kannettavat tietokoneet, tabletit, älypuhelimet, ja kaikki, jotka on varustettu näyttö);
• принтеры; print - Tulostimet;
• – проекторы; projektio - projektori;
• – речевые браузеры; puhe - puhe selaimet;
• – для устройств для слабовидящих; braille - laitteita näkövammaisille;
• – для экранов телевизоров. TV - TV-ruuduissa.

Eikä siinä kaikki. , но они используются редко. On olemassa useita muita CSS mediakyselyjen ominaisuuksia, mutta niitä käytetään harvoin. all. Lisäksi et määritä parametri - oletuksena kaikille.

Rakenne mediakyselyt

css. Luomisen sijasta tyyli tiedoston, voit käyttää CSS. Se näyttää tältä:

(тут будут стили } @media näyttö ja (max-leveys: 1024px) {( on tyylejä}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Jälkeen @media direktiivi, joka tekee selväksi, että media kysely on käytetty, on osoitus laitteen tyyppi (näyttö - näyttö) ja lisäparametrit. Max Width. Tässä esimerkissä CSS mediakyselyitä enimmäisleveydessä omaisuutta. px. Tämä tarkoittaa sitä, että tyylit luetellut olkaimet ovat mukana, jos käyttäjä laitteen näytön koko kuin 1024 px. и and не обязательны. Näyttö ja eikä sitovia. Voit kirjoittaa tähän:

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

Tällaisessa tapauksessa ominaisuuksia voidaan käyttää millä tahansa laitteella, eikä vain niitä, jotka on varustettu tv.

Määrittäminen useita parametreja

Oletetaan, että haluat rajoittaa yhteensä useiden laitteiden, joita käytetään valitsemaan tyyliin. px, но не больше 500 px. Sanotaan haluat näyttää ominaisuudet vain niille, jotka käyvät sivuston älypuhelin, näytön koko on vähintään 320 px, mutta ei enempää kuin 500 kuvapistettä. Tällaisessa tapauksessa pyyntö on muotoa:

@media (min-leveys: 320px) ja (max-leveys: 500 kuvapistettä) {}

and. Jos olet perehtynyt ohjelmointiin, sinun NJ tietää mitä operaattorilta sovelletaan ja. Niille, jotka eivät tiedä: se tarkistaa, jos molemmat ehdot toteutuvat. E. Aktivointi ominaisuudet kyselyn näytön pitäisi olla vähintään 320 ja enintään 500 kuvapistettä.

and не ограничивается одним. Ja toimijoiden määrän ei rajoitu yhteen. Voit laittaa niitä niin paljon kuin haluat. Esimerkiksi yrittää luoda tietyn kokoiseksi näyttöjä älypuhelimille ja aivan eri - televisioissa.

Tärkeä kohta - orientaatio käyttäjän laitteen. Joku lukemassa sivustot älypuhelimeen pystyasennossa, joku - maisemaan. orientation:portrait, для вторых, соответственно, orientation:landscape. Entisen, tarvitset lisäehdon Suunta: Pysty, toisen vastaavasti suunta: vaaka. @media. Nämä linjat on myös esitetty jäljessä sulkeissa @media joukkue. and. Voit jakaa niitä kautta ja.

Toinen mielenkiintoinen vivahde. and вы вполне можете использовать оператор or. Sen sijaan, ja saatat hyvinkin käyttää tai operaattori. Hän tarvitsee vähintään yksi ehto pyynnössä ollakseen totta! Esimerkiksi:

) {} @media (max-leveys: 500 kuvapistettä) tai (suunta: muotokuva) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Jos näyttö on alle 500 px tai käyttöä pystysuunnan, henkselit tulee voimaan tyylejä.

Avainsana ei hienosäätöä

not. Median kysely, voit lisätä sanan ei. Tämä tehdään seuraavasti:

@media (ei max-leveys: 700 pikseliä ) {}

Ominaisuudet tulevat käyttöön, suurin leveys ei ole sama kuin 700 pikseliä.

median ominaisuuksia

Kyselyt voidaan käyttää useita ennalta asetetut tehtävät. W3C. Tutustu kaikkesi verkossa W3C. Useimmat kooderit tarpeeksi omistaa kolme tärkeintä:

• (о нем мы уже говорили); suunta (olemme jo puhuneet siitä);
• (ширина, ее тоже упоминали); leveys (leveys, se on mainittu);
• (высота). korkeus (korkeus).

Korkeus käytetään harvoin, mutta on olemassa muutamia tapauksia, joissa tämä asetus voisi olla hyödyllistä.

Miten ja mihin paikkaan pyyntöihin?

Monet web-suunnittelijat jotenkin laittaa ne tiedoston loppuun tyylejä. Esimerkiksi ensimmäinen luetellaan tärkeimmät tyylejä, ja sitten, kun asiakirjan loppuun, sijoitetaan pyyntöjä.

Tämä ei ole kovin hyvä. Paljon helpompaa sijoittaa ominaisuuksia eri laitteille heti päätyyleistä. Esimerkiksi, sinulla on div, joka asettaa punaisella väri:

div {

väri: punainen;

}

Heti pyynnön jälkeen osoittaa:

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

Määrää ominaisuudet.

Tällainen lähestymistapa olisi hankalaa, jos käytät "puhtaissa» css. Avuksi esikäsittelijän. Heillä on paljon mielenkiintoisia mahdollisuuksia tarkempien sovellus pyytää.

Toinen vaihtoehto - asettamalla ominaisuudet eri laitteiden eri tyylillä tiedostoja. Tämä on erityisen hyödyllistä, jos käytät esikääntäjä direktiivi tuoda. Tuloksena on helppo muokata, puhdas koodi.

Mitä käyttäisit? Kaikki riippuu henkilökohtaisten mieltymysten ja ominaisuuksia joukkue. Ehkä tilalle työsi on tietty tapa saattamisesta mediakyselyjä hyväksytään.

Älä myöskään unohda, että voit yksinkertaistaa elämää uusin ohjelmisto. Se ei ole vain esikäsittelijän. Kanssa Gulp Ryhmä CSS Media kyselyt voi tehdä prosessista paljon helpompaa. Suositeltava hallita tätä työkalua tai sen analogit.