App, css3

Break point css3 – al giugno 2014

Notare che definiscono la visualizzazione piccola (smartphone) per poi adattarla a quella grande da PC.
ed anche che le misure sono in em!
Primo esempio linkato nel titolo:
/* 1st breakpoint – Float B and C, leave A full width on top */
@media all and (min-width: 42em) {
}
/* 2nd breakpoint – Float all, 50/25/25 */
@media all and (min-width: 55em) {
}
/* 3rd breakpoint – Bump up font size at very wide screens */
@media all and (min-width: 75em) {
}
Secondo esempio:
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
.my-page .ui-content {
padding: .5625em; /* 9px */
}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
.my-page .ui-content {
padding: .625em; /* 10px */
}

 

 
/* 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 */
}
 

  • Apple- IOS centrico:   da html.it

  • 320px: iPhone con orientamento portrait
  • 480px: iPhone con orientamento landscape
  • 768px: iPad con orientamento portrait
  • 1024px: iPad con orientamento landscape (ma anche netbook, visto che in genere questi dispositivi hanno una risoluzione orizzontale di 1024px)

 
 
Disquisizione su.. breckpoint dal piccolo al grande e deal grande al piccolo
http://www.palantir.net/blog/re-thinking-breakpoints-responsive-design
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/