Download - Responsive design
Responsive Design Ombu Labs, April 2015
Develop a website design that helps the lay out to get changed according to the screen resolution.
It is centered around fluidity, flexibility and adaptability.
Screen ResolutionResolutions can be defined in an assortment of
breakpoints, but there are several major sizes that you need to focus on more than any others.
1024px / 768px / 480px / 320px
Mobile First• It is a methodology: build the small screen first and then progressively modify the layout as more screen space becomes available. • Only the minimum required files are loaded • It is Ideal for mobile devices that don’t support media
queries.
Content Focus• Design with the content that will be used for the
final site • Understand how the content will be layed out in
your small screen • Let the content define the breakpoints
Media QueriesThe @media rule is used to define different style rules
for different media types/devices (CSS3) !
Media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside
Source: caniuse.com
@media widthProportional Media Queries,
based on relative units, no fixed width Relative to the ‘font-size’ value
!@media all and (min-width: 41em)
@media valuesThere are some other values that can be used
!@media all and (min-width: 41em) and (orientation:landscape) and (min-height:60em){! color: #000000;!}
@media logicWe can use not, and & only to be more specific
!@media (min-width: 41em) and (orientation:landscape){! color: #000000;!}!
@media orderStart we narrower viewports if it is mobile first
@media (min-width: 48em) {background: blue;}!@media (min-width: 80em) {background: red;}!
!If not, you have to use max-width
@media (max-width: 80em) {background: blue;}!@media (max-width: 48em) {background: red;}!
SASS!
Breakpoints can be set as variables $breakpoint-1 : 24em;
$breakpoint-2 : 46.8em; $breakpoint-3 : 50em; $breakpoint-4 : 73em;
@media (max-width: $breakpoint-4) !{background: blue;}!
More!• www.w3schools.com/cssref/css3_pr_mediaquery.asp • developer.mozilla.org/es/docs/CSS/Media_queries • caniuse.com • responsivedesign.is • breakpoint-sass.com
THANK YOU! !
questions?