turretcss

Media Queries

About

Responsive breakpoints are configurable via setting @custom-media queries, by default these are configured to generic sizes.

CSS

@custom-media --xxl (min-width: 1920px);
@custom-media --xl-down (max-width: 1919px);
@custom-media --xl (min-width: 1680px) and (max-width: 1919px);
@custom-media --xl-up (min-width: 1680px);
@custom-media --l-down (max-width: 1679px);
@custom-media --l (min-width: 1280px) and (max-width: 1679px);
@custom-media --l-up (min-width: 1280px);
@custom-media --m-down (max-width: 1279px);
@custom-media --m (min-width: 960px) and (max-width: 1279px);
@custom-media --m-up (min-width: 960px);
@custom-media --s-down (max-width: 959px);
@custom-media --s (min-width: 640px) and (max-width: 959px);
@custom-media --s-up (min-width: 640px);
@custom-media --xs-down (max-width: 639px);
@custom-media --xs (min-width: 320px) and (max-width: 639px);
@custom-media --xs-up (min-width: 320px);
@custom-media --xxs (max-width: 320px);

Related