IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Jan Chaloupka
Člen
Avatar
Jan Chaloupka:28.7.2021 13:54

Na mých stránkách, kde mám mobilní zobrazení přes @media screen and (max-width: Xpx) mi nefunguje zobrazení pro PC.
Je to chybou v CSS nebo na to musím udělat JS podmínku?
Díky

Zkusil jsem: Zkoušel jsem, zda na to neexistuje podmínka v JS, ale nic jsem nenašel.

Chci docílit: Aby šla moje stránka zobrazit ve verzi pro PC v mobilu.

 
Odpovědět
28.7.2021 13:54
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:29.7.2021 11:31

Podivej se, jak media resi css bootstrap.
https://getbootstrap.com/…layout/grid/
https://getbootstrap.com/…ed/download/
https://getbootstrap.com/…les/pricing/
Si to stahni, mela by tm byt i neminifikovana verze. Pripadne si najdi priklady googlem.

  • nedal jsi zkopirovatelny kod
  • nenapsal, co to dela
  • neukazal kod tvych pokusu

Treba mas jen spatne zavorky.
Takze mas rozbite auto v garazi. Co ti ma asi odpovedet automechanik v dilne, ze s nim mas spatne?

google = css media example mobile

<style>
/*ruzne kody nalezene googlem*/
@media screen {  /* media je screen { css } */
    * { / * vsechny elementy */
        background: silver
    }
}
---
@media screen and (min-width: 480px) { /*zapis pro min-width*/
    div {
        float: left;
        background: red;
    }
}
---
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

</style>

a jeste se da linkovat styl pres link
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css"  media="print">

Jestli je to mobil nebo ne, se urcuje podle sirky obrazovky. A device je pak zorazovaci zarizeni. Treba print je pro tisk na tiskarne. Treba chces, kdyz si nekdo tiskne stranku, aby tam nemel menu a tim padem mel vice prostoru pro obsah.
Kdyz tm nedas ani screen, ani print, tak se jedna o vsechna, viz posledni priklad z kodu.

 
Nahoru Odpovědět
29.7.2021 11:31
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.