citlivý dizajn pre webové stránky používajúce css - css

Píšem css pre niektoré webové stránky, ktoré musia byť citlivé. Som nový pre css a neviem, veľa reagujúcich techník. Rozdelil som svoj css kód na tri časti.

1. Pracovná plocha: všetky univerzálne štýly
2. Tablety: @media (min-width: 768px) a (max-width: 991px) {moje štýly}
3. Mobily: @media (min-width: 320px) a (max-width: 480px) {moje štýly}

Bude plne reagovať a podporovať všetko štandardné zariadenia alebo musím urobiť ešte pár zmien? Tu ALL znamená doslova všetky zariadenia.

odpovede:

Nemusíte ponechať medzery medzi 481 a 766 a medzi 0 až 319 px. To nie je naozaj citlivé.

@media screen and (max-device-width:480px){ // styles for mobile}
@media screen and (max-device-width:780px){ // styles for tablets}
@media screen and (min-device-width:781px){ // styles for desktop}

UPRAVIŤ K dispozícii je nositeľnosť nižšia ako 319 px. Príklad:

/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {

}

Mal by existovať nejaké zariadenie medzi 481 a 766.

Ak si myslíte, že reakcia je jednoduchá, cítim sa zle pre vás syna. Máme 99 výhľadov, ale iPhone je len jeden.

Tu je zoznam Mediálne dopyty pre štandardné zariadenia

To, čo sa takmer všetci pokazilo, je to, že reagujekonštrukcia by mala byť vykonaná na základe niektorých preddefinovaných zlomových bodov. Mal by definovať váš obsah, nie vašu obrazovku návštevníka.Ak je 10 bodov zlomu, je tu niečo určite zlé na štruktúre webu.Menej media dotazy = lepšie.Začnite odtiaľto a uzavrite perfektnú štruktúru vášho obsahu pre ANY obrazovku.