Bootstrap 3 media queries dokumentācijā ir teikts:
Mēs izmantojam šādus mediju vaicājumus savos Less failos, lai izveidotu galvenos lūzuma punktus mūsu režģu sistēmā.
Īpaši mazas ierīces (tālruņi, mazāk nekā 768px): Nav multivides vaicājuma, jo tas ir Bootstrap noklusējuma iestatījums.
Mazas ierīces (planšetdatori, 768px un vairāk):
@media (min-width: @screen-sm-min) { ... }
vidējas ierīces (galddatori, 992px un lielāki):
@media (min-width: @screen-md-min) { ... }
Lielas ierīces (lieli galddatori, 1200px un lielāki):
@media (min-width: @screen-lg-min) { ... }
Vai ir paredzēts, ka @screen-sm
, @screen-md
un @screen-lg
nosaukumus varēsim izmantot arī mediju vaicājumos? Jo man tas nedarbojas. Man ir jāizmanto pikseļu izmēri, piemēram, @media (min-width: 768px) {...}
, lai tas darbotos. Vai es kaut ko daru nepareizi?
Vai atsauce uz 480px īpaši mazām ierīcēm ir pārrakstīšanās kļūda? Vai nevajadzētu teikt līdz 767px? (no dokumentācijas izņemts)
Bootstrap nav ļoti labi dokumentēti multivides vaicājumi. Šie @screen-sm
, @screen-md
, @screen-lg
mainīgie faktiski attiecas uz LESS mainīgajiem, nevis vienkāršiem CSS.
Pielāgojot Bootstrap, jūs varat mainīt multivides vaicājumu pārrāvuma punktus, un kompilēšanas laikā mainīgie @screen-xx tiek mainīti uz jebkuru pikseļu platumu, ko esat definējis kā screen-xx. Šādā veidā šādu sistēmu var kodēt vienu reizi un pēc tam lietotājs to var pielāgot savām vajadzībām.
Līdzīgs jautājums šeit, kas varētu sniegt lielāku skaidrību: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries.
CSS joprojām būs jāizmanto tradicionālie mediju vaicājumi, lai aizstātu vai papildinātu to, ko dara Bootstrap.
Attiecībā uz otro jautājumu - tā nav pārrakstīšanās kļūda. Tiklīdz ekrāns kļūst mazāks par 768px, sistēma kļūst pilnīgi plūstoša un maina lielumu pie jebkuras ierīces platuma, tādējādi novēršot nepieciešamību pēc pārrāvuma punktiem. Pārrāvuma punkts pie 480px pastāv tāpēc, ka izkārtojumā tiek veiktas īpašas izmaiņas, lai optimizētu izkārtojumu mobilajām ierīcēm.
Lai to redzētu darbībā, apmeklējiet šo piemēru viņu vietnē (http://getbootstrap.com/examples/navbar-fixed-top/) un mainiet loga izmēru, lai redzētu, kā tas apstrādā dizainu pēc 768px.
Šis jautājums ir aplūkots https://github.com/twbs/bootstrap/issues/10203. Līdz šim nav plānots mainīt Grid saderības apsvērumu dēļ.
Jūs varat saņemt Bootstrap no šīs atzarojuma atzarojuma hs
: https://github.com/antespi/bootstrap/tree/hs.
Šis atzars sniedz jums papildu pārtraukuma punktu pie 480px, tāpēc jums ir:
Lai izprastu Bootstrap 3, ir svarīgi vispirms izstrādāt mobilo ierīču dizainu. Tā ir galvenā izmaiņa salīdzinājumā ar BootStrap 2.x. Parasti šablonu var izmantot (LESS):
.template {
/* rules for mobile vertical (< 480) */
@media (min-width: @screen-hs-min) {
/* rules for mobile horizontal (480 > 768) */
}
@media (min-width: @screen-sm-min) {
/* rules for tablet (768 > 992) */
}
@media (min-width: @screen-md-min) {
/* rules for desktop (992 > 1200) */
}
@media (min-width: @screen-lg-min) {
/* rules for large (> 1200) */
}
}
Atsauce uz 480px ir izņemta. Tā vietā ir norādīts:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
Bootstrap 3 nav pārtraukuma punkta zem 768px.
Ja vēlaties izmantot @screen-sm-min
un citus miksīnusus, jums ir jākompilē ar LESS, skatiet http://getbootstrap.com/css/#grid-less.
Šeit ir pamācība, kā lietot Bootstrap 3 un LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial.