Új hozzászólás Aktív témák

• #1979 adam_ senior tag

  Új Válasz 2015-02-17 21:10:39 #1979

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  adam_

  senior tag

  Nem tudom ismeritek-e a http://quirktools.com/ oldalt, elég jó kis tesztelős téma.

  Ehhez kapcsolódik a kérdésem. Elég bosszantó, amikor a 20. tablet/mobil fajtán tesztelem a honlapomat, és mindegyiken persze, hogy másképp néz ki. Egyenlőre "kézzel írt" media querykkel oldom meg a responsive elemeket, lentebb mellékelem. A mostani projektemben meg csak az szerepel, hogy "tabletre" is, meg ájfóónra is kellene fejleszteni. Még nincs mögöttem annyi projekt, hogy ezt tapasztalatból tudnám kezelni, de elsőkörben ezt az ügyféllel kell megbeszélni, behatárolni, hogy mely típusú tabletekre, etc. telefonokra kellene fejleszteni,? Általában ez is behatárolható a projektben (vagy csak mobil / tablet / desktop, esetleg desktop HD van? (és ugye itt jön, hogy mobilból és tabletből is már millió egy kijelzőméretű van...) ..

  Vagy egyszerűen a kézzel írt media query-k helyett Bootstrap / Foundation etc. használatával ezek a cross-platform responsive problémák könnyedebben orvosolhatóak?

  /* 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 */
  }
  
  /* 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 (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  }

  Köszönöm a válaszokat,

  Ádám

Új hozzászólás Aktív témák