Reszponzív töréspontok egyszerű definiálása.
@screen-xs-min: 480px; @screen-sm-min: 768px; @screen-md-min: 992px; @screen-lg-min: 1200px; @screen-xl-min: 1600px; @screen-xs-max: (@screen-sm-min - 1); /*767*/ @screen-sm-max: (@screen-md-min - 1); /*991*/ @screen-md-max: (@screen-lg-min - 1); /*1199*/ @screen-lg-max: (@screen-xl-min - 1); /*1599*/ @mobile: ~"only screen and (max-width: @{screen-xs-min})"; @tablet: ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})"; @desktop: ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})"; @laptop: ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-lg-min})"; @large: ~"only screen and (min-width: @{screen-lg-min}) and (max-width: @{screen-xl-min})"; @max: ~"only screen and (min-width: @{screen-xl-min})";
Teszteléshez:
div#helper { display: block; position: fixed; bottom: 0; right: 0; font-size: 15px; z-index: 999; width: 200px; height: 200px; text-align: center; line-height: 200px; background-color: rgba(0, 0, 0, 0.7); color: #fff; &::before { content: "FullHD"; @media @mobile { content: "@media @mobile"; } @media @tablet { content: "@media @tablet"; } @media @desktop { content: "@media @desktop"; } @media @laptop { content: "@media @laptop"; } @media @large { content: "@media @large"; } } }