Mikä on responsiivinen web-suunnittelu?
Nykyaikaista web-kehitystä ei voi kuvitella ilman mukautuvia/responsiivisia suunnitteluratkaisuja. Ne mahdollistavat verkkolähteiden tasavertaisen käytön millä tahansa laitteella: älypuhelimella, tabletilla, työpöytäkoneella tai televisiolla.
Miten se toimii?
- Kehitystiimi määrittelee, miltä kukin elementti näyttää eri näyttökokojen mukaan;
- Tarvittavat ohjeet asetetaan koodiin;
- Selain seuraa näkymän muutoksia;
- Selain soveltaa kehitystiimin koodiin asettamia sääntöjä.
Media-kyselyt
Media-kysely mahdollistaa mukautuvat/responsiiviset suunnittelut. Näiden kyselyiden avulla kehittäjät voivat määrittää minkä tahansa elementin tyylit näytön koon mukaan.
Huomautus
Media-kysely voidaan nähdä ohjeina: "Jos käyttäjän näyttö on työpöytä, käytä tällaisia tyylejä elementtiin. Jos käyttäjän näyttö on älypuhelin, käytä muita tyylejä elementtiin. Ja niin edelleen.".
Media-kyselyn perussyntaksi on seuraava:
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>- määrittää laitteen tyypin. Mahdolliset arvot:all- oletusarvo. Jos mitään ei ole määritetty, media-sääntö toimii kaikilla laitteilla;print- media-sääntö toimii laitteilla, jotka tuottavat tulostettuja asiakirjoja, kuten tulostimet;screen- media-sääntö toimii kaikilla fyysisen näytön omaavilla laitteilla.
<media_feature>- määrittää laitteen ominaisuudet. Yleisin käyttö:min-width:- näkymän pienin leveys;max-width:- näkymän suurin leveys.
<operator>- media-tyyppi ja media-ominaisuus erotetaan valinnaisella loogisella operaattorilla. Sen arvot voivat olla:andtai,.
Huomautus
Seuraavissa luvuissa tarkastellaan media-kyselyiden käyttöä käytännössä.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you give an example of a media-query in CSS?
What are some common use cases for media-queries?
How do I choose between adaptive and responsive design?
Awesome!
Completion rate improved to 2.04Mikä on responsiivinen web-suunnittelu?
Pyyhkäise näyttääksesi valikon
Nykyaikaista web-kehitystä ei voi kuvitella ilman mukautuvia/responsiivisia suunnitteluratkaisuja. Ne mahdollistavat verkkolähteiden tasavertaisen käytön millä tahansa laitteella: älypuhelimella, tabletilla, työpöytäkoneella tai televisiolla.
Miten se toimii?
- Kehitystiimi määrittelee, miltä kukin elementti näyttää eri näyttökokojen mukaan;
- Tarvittavat ohjeet asetetaan koodiin;
- Selain seuraa näkymän muutoksia;
- Selain soveltaa kehitystiimin koodiin asettamia sääntöjä.
Media-kyselyt
Media-kysely mahdollistaa mukautuvat/responsiiviset suunnittelut. Näiden kyselyiden avulla kehittäjät voivat määrittää minkä tahansa elementin tyylit näytön koon mukaan.
Huomautus
Media-kysely voidaan nähdä ohjeina: "Jos käyttäjän näyttö on työpöytä, käytä tällaisia tyylejä elementtiin. Jos käyttäjän näyttö on älypuhelin, käytä muita tyylejä elementtiin. Ja niin edelleen.".
Media-kyselyn perussyntaksi on seuraava:
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>- määrittää laitteen tyypin. Mahdolliset arvot:all- oletusarvo. Jos mitään ei ole määritetty, media-sääntö toimii kaikilla laitteilla;print- media-sääntö toimii laitteilla, jotka tuottavat tulostettuja asiakirjoja, kuten tulostimet;screen- media-sääntö toimii kaikilla fyysisen näytön omaavilla laitteilla.
<media_feature>- määrittää laitteen ominaisuudet. Yleisin käyttö:min-width:- näkymän pienin leveys;max-width:- näkymän suurin leveys.
<operator>- media-tyyppi ja media-ominaisuus erotetaan valinnaisella loogisella operaattorilla. Sen arvot voivat olla:andtai,.
Huomautus
Seuraavissa luvuissa tarkastellaan media-kyselyiden käyttöä käytännössä.
Kiitos palautteestasi!
