# <stl:style> 自适应 CSS 样式

<stl:style type="设备类型" min="最小宽度" max="最大宽度"> </stl:style>

版本要求

<stl:style> 标签需要使用 SSCMS 7.2.1 以上版本。

# 说明

通过 <stl:style> 标签在模板中实现自适应媒体查询(Media Query)功能。

媒体查询可以针对不同的设备类型访问页面时的不同宽度定义不同的 CSS 样式，从而达到页面自适应的效果。

min 与 max 属性用于精确定位设备最小以及最大尺寸，如果设置了 min 或者 max 属性，系统将忽略 type 设备类型属性。

# 不同设备的屏幕分辨率

不同设备的屏幕分辨率如下所示:

设备	分辨率
手机	<= 480px
平板竖屏	>= 481px 且 <= 767px
平板横屏	>= 768px 且 <= 1024px
电脑桌面	> 1024px

# 属性

属性	说明
type	访问页面的设备类型
min	设备页面可见区域的最小宽度
max	设备页面可见区域的最大宽度

# type - 设备类型

访问页面的设备类型。

"desktop" 桌面
"!desktop" 非桌面
"tablet" 平板
"!tablet" 非平板
"mobile" 手机
"!mobile" 非手机

# min - 最小宽度

设备页面可见区域的最小宽度。

# max - 最大宽度

设备页面可见区域的最大宽度。

# 示例

# 针对桌面与非桌面（平板、手机）设备分别定义元素高度

下面的例子针对桌面与非桌面（平板、手机）设备分别定义元素高度。

<stl:style type="desktop">
  .swiper-container { height: 600px; }
</stl:style>
<stl:style type="!desktop">
  .swiper-container { height: 400px; }
</stl:style>

# 采用 min 与 max 定义元素高度

下面的例子与上一示例效果完全一致，只是采用了 min 与 max 属性精确判断设备宽度。

<!-- <stl:style type="desktop"> -->
<stl:style min="1025">
  .swiper-container { height: 600px; }
</stl:style>
<!-- <stl:style type="!desktop"> -->
<stl:style max="1024">
  .swiper-container { height: 400px; }
</stl:style>

# 区分平板竖屏/横屏

通常平板竖屏的宽度为 481px 至 767px 之间，平板横屏的宽度为 768px 至 1024px 之间：

<!-- 平板竖屏 -->
<stl:style min="481" max="767">
  .swiper-container { height: 600px; }
</stl:style>
<!-- 平板横屏 -->
<stl:style min="768" max="1024">
  .swiper-container { height: 400px; }
</stl:style>

# 针对桌面与非桌面（平板、手机）设备分别显示与隐藏

<stl:style type="desktop">
  .desktop { display: block; }
  .not-desktop { display: none }
</stl:style>
<stl:style type="!desktop">
  .desktop { display: none; }
  .not-desktop { display: block }
</stl:style>