Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Kamil
Člen
Avatar
Kamil:22.11.2022 11:21

Ahoj,

jak mohu udělat css design na konkrétní zařízení? Nevím jestli to dobře vysvětlím. Zkusím to tady na jednoduchém příkladu.

Mám tři typy zařízení

  1. šířka 1920px výška 980px
  2. šířka 1280px výška 577px
  3. šířka 482px výška 786px

a rád bych pro tyto tři zařízení chtěl mít media query.

Zkusil jsem: Zkoušel jsem to následovně.

@media screen and (max-width:1920px), screen and (max-height:937px){
    body{
        background: red;
    }
}
@media screen and (max-width:1280px), screen and (max-height:577px){
    body{
        background: orange;
    }
}
@media screen and (max-width:500px), screen and (max-height:786px){
    body{
        background: green;
    }
}

Na 1920px se mi zobrazí červená bez problému
Na 1280px se mi zobrazí místo oranžové zelená
Na 500px se mi zobrazí zelená

Chci docílit: Snažím se dosáhnou toho, aby na všech třech zařízení fungovaly styly dle media query...
Děkuji předem za ochotu.

 
Odpovědět
22.11.2022 11:21
Avatar
Kamil
Člen
Avatar
Kamil:22.11.2022 11:26

Ono nejspíše bude nejlepší se vykašlat na

@media screen and (max-width:1920px), screen and (min-height:937px){
    body{
        background: red;
    }
}
@media screen and (max-width:1280px), screen and (max-height:577px){
    body{
        background: orange;
    }
}
@media screen and (max-width:500px), screen and (min-height:786px){
    body{
        background: green;
    }
}

Protože to je celé co mi dělá neplechu a měl bych to jednotlivě rozepsat.

 
Nahoru Odpovědět
22.11.2022 11:26
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.11.2022 13:18

Proc to neudelas pomoci bootstrapu? Pripadne si zkopci jejich styly.

https://getbootstrap.com/…ed/download/
https://getbootstrap.com/…/containers/
https://getbootstrap.com/…layout/grid/#…

Ale u col to jde nastavit pomoci xs, sm ... (#grid-options).

col je zkratka pro column
xs je velikost zarizeni
cislo na konci je sirka, kolik ma sloupec zabirat pri rozdeleni 100% sirky na 12 sloupcu class row nebo container

https://getbootstrap.com/docs/5.2/layout/grid/#setting-one-column-width
  <div class="row">
    <div class="col"> - sirka prvniho sloupce se automaticky dopocita
      1 of 3
    </div>
    <div class="col-6"> - sirka sloupce 2 bude 6 dilu z 12, cili 50%
      2 of 3 (wider)
    </div>
    <div class="col"> - sirka prvniho sloupce se automaticky dopocita
      3 of 3
    </div>

Cili, druhy sloupec bude mit sirku 6/12 100% sirky, cili 50%. A prvni a posledni dohromady zbylych 50%, cili kazdy 25%.
Cili, jako bys tam napsal

col1,2,3 =  width:25%, width:50%, width:25% ... nebo
col1,2,3 =  col-3, col-6, col-3 ... nebo, jak to je v prikladu...
col1,2,3 =  col, col-6, col

No, a jak se to ted sdruzuje? To je dobre si zkouknout, jak to vypada v css
https://getbootstrap.com/…layout/grid/#…

class="col-6 col-md-4"

col bude mit normalne sirku 6 vsude, ale na md zarizeni bude mit sirku 4
Kdyz budes chtit definovat vic zarizeni, jako mam ja na rar.cz (tez postavene pomoci bootstrap), tak je dobre pri zapisu zachovat poradi, protoze css uznava vlastnosti z posledni class a bootstrap css ma podminku jen "je-li vetsi nez."

col-12 col-sm-12 col-md-4 col-lg-3 // cili, mohl jsem to zkratit na
col-12 col-md-4 col-lg-3 // ale, az to budu priste menit, tak se mi
// nechce znova studovat, jake musis dodrzet poradi :)

sloupec bude mit sirku 12
je-li sm, tak opet 12
je-li md, tak 4
a lg a vetsi 3

--- vypis s bootstrap.css, jak resi sloupce pro ruzne velikosti screen-width
@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
Editováno
 
Nahoru Odpovědět
22.11.2022 13:18
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.11.2022 13:42

Ha, tak dokonce na poradi asi nezalezi, u verze BT5! Protoze prepisuji sirky vsech conteineru automaticky. U BT4, ktere pouzivam na rar.cz, je to v css jinak

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

U BT4 je nutne pak to dodrzet poradi, protoze css vsechny hodnoty z classu prepisuje.
Nevim, zda to pisu srozumitelne.

Kdyz je screen 900px, pak plati, ze je `w>768, @media (min-width: 768px) `, ale soucasne je take w>576 @media (min-width: 576px). A col jsou definovane podobne, jako container...

@media (min-width: 576px) {
  .col-sm {
...
Priklad 2:
screen = 900px
plati `w>768, @media (min-width: 768px) `, ale soucasne je take w>576 @media (min-width: 576px)
coz odpovida sm (w ≥576px), md (w ≥768px)
pri zapisu class="col-12 col-sm-12 col-md-4 col-lg-3 "
plati  col-12 vzdy + col-sm-12 + col-md-4
pokud ma kazda z tech class stejny parametr, tak bude mit hodnotu posledni class, coz je col-md-4

jinymi slovy, v css to vypada takto:

.col {
max-width:100%; /*col-12*/
max-width:100%; /*col-sm*/
max-width:33%; /*col-md*/
}

Kdyz to takto napise do css, tak je to stejne jako napsat

.col {
max-width:33%; /*col-md*/
}
 
Nahoru Odpovědět
22.11.2022 13:42
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 4 zpráv z 4.