Diskuze: Jak udělat css breakpoint na konkrétní zařízení?
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 4 zpráv z 4.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
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.
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, colNo, 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;
}
}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*/
}Zobrazeno 4 zpráv z 4.