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/