Talk:CSS

From BC$ MobileTV Wiki
Jump to: navigation, search

Example LESS responsive approach:

@watch-s:     38mm;
@watch:       42mm;
@mobile-xs:   300px;
@mobile-s:    320px;
@mobile:      375px;
@mobile-vert: 460px;
@mobile-horz: 767px;
@tablet-md:   860px;
@tablet:      940px;
@tablet-min:  1080px;
@laptop:      1200px;
@desktop:     1800px;
@tv:          2400px;

/* Mixin to apply @media "max-width" query */
.responsive(@maxWidth; @rules) {
  @media screen and (max-width: @maxWidth) {
    @rules();
  }
}

/* Use like this */
.something {
  display: block;
  padding: 12px;

  /* responsive variation of "something" */
  .responsive(@tv, { 
     font-size: 32px;
     padding: 24px;
  });
  .responsive(@desktop, { 
     font-size: 26px;
  });
  .responsive(@laptop, { 
     font-size: 21px; 
  });
  .responsive(@tablet, { 
     font-size: 18px;
     padding: 5px;
  });
  .responsive(@mobile, { 
     font-size: 14px;
     padding: 2px 4px;
  });
  .responsive(@watch, { 
     font-size: 12px;
     padding: 0px;
  });

}