样式

YIS提供的自定义媒体查询

YIS 提供了基于分辨率不同的自定义媒体查询，该部分已经引入到了 reset.css 不需要开发者额外引入。

@custom-media --low-resolution (max-device-pixel-ratio: 1.49),(max-resolution: 143dpi), (max-resolution: 1.49dppx);

@custom-media --mid-resolution (min-device-pixel-ratio:1.5) and (max-device-pixel-ratio:2.49), (min-resolution:144dpi) and (max-resolution:239dpi), (min-resolution:1.5dppx) and (max-resolution:2.49dppx);

@custom-media --high-resolution (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx);

使用方式

代码节选自：yis-js/components/util.css

:root{
  --util-border {
		  //......
        @media (--low-resolution) {
			  //......
        }
        @media (--mid-resolution) {
			  //......
        }
        @media (--high-resolution) {
			  //......
        }
    }
}

开发者定义媒体查询

为避免命名冲突请使用 --self 作为命名空间。