Dotaz na css media tag

Napište nám o svých webových stránkách, dejte vědět o jakémkoliv jiném zajímavém webu

Moderátoři: Myloš, Mods_senior

Odpovědět
Uživatelský avatar
Difadon
Level 2.5
Level 2.5
Příspěvky: 323
Registrován: 16 led 2014 21:09
Bydliště: Špindlerův Mlýn
Kontaktovat uživatele:

Dotaz na css media tag

Příspěvek od Difadon »

Ahoj,

Měl bych jeden dotaz. Snad se tu najde někdo, kdo umí s css. Snažím se docílit toho, aby určitý prvek nebyl zobrazený na klasických monitorech s šířkou menší jak 1023px a zároveň potřebuji prvek skrýt i pro tablety, telefony,... Ale zároveň pro klasické monitory s šířkou vyšší jak 1024px už se prvky zobrazí. Je následující postup správně?

Kód: Vybrat vše

@media (max-width: 1023px) {
        .class  {
                display: none;
                }
        }
 
@media only screen
        and (max-device-width : 1920px),
        and (-webkit-min-device-pixel-ratio: 1.5),
        and (-webkit-min-device-pixel-ratio: 2) {
                .class  {
                        display: none;
                        }
                }


Části and (max-device-width : 1920px), si úplně nevšímejte. Zatím tam mám plácnutou nějakou šířku, protože jsem ještě nevyzkoumal jaký zlomový bod by byl ideální. Jde mi jenom o princip. :)
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: Dotaz na css media tag

Příspěvek od CZechBoY »

Tablet nebo telefon nezjistíš pomocí css, budeš muset použít js.
Media screen je pc, ntb, tablet, telefon ... :)

více třeba tady:
http://www.vzhurudolu.cz/prirucka/css3-media-queries
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Odpovědět
  • Podobná témata
    Odpovědi
    Zobrazení
    Poslední příspěvek

Zpět na „Web-tipy a vaše weby“