Responsywny projekt z zapytaniem o media: rozmiar ekranu?

Question

Responsywny projekt z zapytaniem o media: rozmiar ekranu?

Pracuję nad responsywną stroną internetową przy użyciu zapytań o media. Ale nie wiem, jak wziąć dobry zestaw szerokości.

tabela rozdzielczości urządzenia

Jak widać na tej tabeli, istnieje wiele różnych rozdzielczości nawet dla jednego typu urządzenia. A ponieważ rozdzielczość jest coraz większa na urządzeniu mobilnym, trudno jest wiedzieć, jaki projekt zastosować dla konkretnej rozdzielczości.

Na razie używam tego:

Mobile First

@ media screen and (min-width:720px) = > Phablet

@media screen and (min-width: 768px) = > Tablet

@ media screen and (min-width: 1024px) = > Desktop

Dziękuję za wszelkie rady lub rekomendacje !

11

css mobile-website media-queries responsive-design screen-resolution

Author: oOnez, 2014-02-05

Source

5 answers

Oto zapytania o media dla typowych punktów przerwania urządzenia.

    /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

12

Author: muni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-28 02:40:25

Szerokość ekranu Bootstrap v3.x zastosowania są następujące:

Extra small devices telefony (<768px) / .col-xs-
Small devices tabletki (≥768px) / .col-sm-
Medium devices Komputery Stacjonarne (≥992px) / .col-md-
Large devices Komputery Stacjonarne (≥1200px) / .col-lg-

Są więc dobre w użyciu i sprawdzają się w praktyce.

3

Author: Atrix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-25 17:38:30

Spójrz na to... http://getbootstrap.com/

Dla dużych stron internetowych używam Bootstrap i czasami (dla prostych stron) tworzę cały styl z niektórymi @ mediaqueries. To bardzo proste, po prostu pomyśl cały kod w procentach.

.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

Wewnątrz kontenera, twoja struktura musi mieć szerokość w procentach jak ta...

.col-1 {
width: 40%;
float: left;
}

.col-2 {
width: 60%;
float: left;
}

@media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}

W niektórych prostych interfejsach, jeśli zaczniesz rozwijać projekt w ten sposób, będziesz miał duże szanse, aby mieć w pełni strona responsywna wykorzystująca punkty przerwania tylko do regulacji przepływu obiektów.

2

Author: Ico Portela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-06 11:19:12

Podam swoje, ponieważ rozwiązanie @ muni s było dla mnie trochę przesadne

Uwaga: Jeśli chcesz dodać własne definicje dla kilku rozdzielczości razem, powiedz coś takiego:

//mobile generally   
 @media screen and (max-width: 1199)  {

      .irns-desktop{
        display: none;
      }

      .irns-mobile{
        display: initial;
      }

    }

Pamiętaj, aby dodać te definicje do dokładnych definicji, aby kaskadowo poprawnie (np. "portret smartfona" musi wygrać w porównaniu do "ogólnie mobilnego")

//here all definitions to apply globally


//desktop
@media only screen
and (min-width : 1200) {


}

//tablet landscape
@media screen and (min-width: 1024px) and (max-width: 1600px)  {

} // end media query

//tablet portrait
@media screen and (min-width: 768px) and (max-width: 1023px)  {

}//end media definition


//smartphone landscape
@media screen and (min-width: 480px) and (max-width: 767px)  {

}//end media query



//smartphone portrait
@media screen /*and (min-width: 320px)*/
and (max-width: 479px) {

}

//end media query

1

Author: Toskan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-16 22:40:56

score 14 · Accepted Answer

Responsive Web design (RWD) to podejście do projektowania stron internetowych, którego celem jest tworzenie witryn, aby zapewnić optymalne wrażenia wizualne [3]}

Projektując responsywną stronę internetową należy wziąć pod uwagę rozmiar ekranu, a nie Typ urządzenia. Zapytania o media pomogą ci to zrobić.

Jeśli chcesz stylizować swoją witrynę na urządzenie, możesz użyć wartości user agent, ale nie jest to zalecane, ponieważ będziesz musiał ciężko pracować, aby utrzymać swój kod dla nowych urządzeń, nowych przeglądarek, przeglądarek wersje itp. Podczas korzystania z rozmiaru ekranu, wszystko to nie ma znaczenia.

Możesz zobaczyć kilka standardowych rozdzielczości pod tym linkiem .

Ale , moim zdaniem, powinieneś najpierw zaprojektować układ witryny, a dopiero potem dostosować go za pomocą zapytań o media, aby pasował do możliwych rozmiarów ekranu.

Dlaczego? Jak powiedziałem wcześniej, różnorodność rozdzielczości ekranu jest duża, a jeśli zaprojektujesz wersję mobilną, która jest ukierunkowana na 320px, Twoja witryna nie zostanie zoptymalizowana do ekranów 350px lub Ekrany 400px.

Porady

podczas projektowania strony responsywnej otwórz ją w przeglądarce komputerowej i zmień szerokość przeglądarki, aby zobaczyć, jak szerokość ekranu wpływa na układ i styl.
użyj procentu zamiast pikseli, ułatwi Ci to pracę.

Przykład

Mam tabelę z 5 kolumnami. Dane wyglądają dobrze, gdy rozmiar ekranu jest większy niż 600px, więc dodaję punkt przerwania na 600px i ukrywa 1 mniej ważna kolumna, gdy rozmiar ekranu jest mniejszy. Urządzenia z dużymi ekranami, takie jak komputery stacjonarne i tablety, będą wyświetlać wszystkie dane, podczas gdy telefony komórkowe z małymi ekranami będą wyświetlać część danych.

Stan umysłu

Nie jest bezpośrednio związany z pytaniem, ale ważny aspekt w responsywnym projektowaniu. Responsywny projekt odnosi się również do faktu, że użytkownik ma inny stan umysłu podczas korzystania z telefonu komórkowego lub pulpitu. Na przykład, po otwarciu swojego strona banku w godzinach wieczornych i sprawdzić swoje zapasy chcesz jak najwięcej danych na ekranie. Po otwarciu tej samej strony w przerwie na lunch prawdopodobnie chcesz zobaczyć kilka ważnych szczegółów, a nie wszystkie wykresy z ubiegłego roku.