mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 22:13:26 +00:00
64b78ad992
On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
27 lines
590 B
JavaScript
27 lines
590 B
JavaScript
"use strict";
|
|
|
|
// Media query breakpoints according to Bootstrap 4.5
|
|
const xs = 0;
|
|
const sm = 576;
|
|
const md = 768;
|
|
const lg = 992;
|
|
const xl = 1200;
|
|
|
|
// Breakpoints for mobile devices used by Google Chrome as of Version 86
|
|
const ml = 425; // Mobile large
|
|
const mm = 375; // Mobile medium
|
|
const ms = 320; // Mobile small
|
|
|
|
module.exports = {
|
|
media_breakpoints: {
|
|
xs_min: xs + "px",
|
|
sm_min: sm + "px",
|
|
md_min: md + "px",
|
|
lg_min: lg + "px",
|
|
xl_min: xl + "px",
|
|
ml_min: ml + "px",
|
|
mm_min: mm + "px",
|
|
ms_min: ms + "px",
|
|
},
|
|
};
|