salix/front/core/styles/responsive.scss

@import "variables";

// XXX: For testing
body { font-size: 8pt; }

/*
// Desktop - Laptop 1360x768
@media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px)
{
	body { font-size: 10pt; }
}

//  Mobile - Low DPI
@media
	(min-resolution: 120dpi),
	(-webkit-min-device-pixel-ratio: 1.5)
{
	body { font-size: 9pt; }
}
@media
	(min-resolution: 144dpi),
	(-webkit-min-device-pixel-ratio: 1.5)
{
	body { font-size: 11pt; }
}

// Mobile - Normal DPI
@media
	(max-device-width: 383px) and (min-resolution: 192dpi),
	(max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2)
{
	body { font-size: 10pt; }
}
@media
	(min-device-width: 384px) and (min-resolution: 192dpi),
	(min-device-width: 384px) and (-webkit-min-device-pixel-ratio: 2)
{
	body { font-size: 11pt; }
}

// Mobile - High DPI
@media
	(max-device-width: 411px) and (min-resolution: 249dpi),
	(max-device-width: 411px) and (-webkit-min-device-pixel-ratio: 3)
{
	body { font-size: 10pt; }
}
@media
	(min-device-width: 412px) and (min-resolution: 249dpi),
	(min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3)
{
	body { font-size: 11pt; }
}
*/
.vn-hide-narrow {
	@media (max-width: $mobile-width) {
		display: none;
	}
}