CSS - RTL 语言是否有@media 查询答案

【问题标题】：CSS - Is there @media query for RTL languagesCSS - RTL 语言是否有@media 查询
【发布时间】：2014-11-07 00:38:24
【问题描述】：

我正在为我的大 css（更少）样式添加 rtl（从右到左）语言支持。我正在寻找一种在 .less 文件中添加嵌套规则的方法，就像分辨率一样

屏幕尺寸我可以做到（为某些分辨率定义了@small 变量），而且非常舒适。

.my-class {
    width: 100px;

    @media @small {
        width : 50px;
    }

}

有没有办法做类似的事情

@media direction(rtl) {

    /** my rtl styles goes here **/

}

当我可以为 rlt 语言的一些差异添加嵌套样式而不创建单独的样式时，这在 .less 文件中将非常有用。

我现在唯一发现的是 CSS 中的 :dir 伪，但目前仅支持 Firefox。 https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

我需要 IE9 + 支持。

【问题讨论】：

【解决方案1】：

没有。方向性不是媒介的属性，它是文档及其内容的属性。

相反，您可以使用像:dir(rtl) 这样的伪类，它可以直接或通过继承间接匹配任何设置了从右到左方向性的元素。不幸的是，browser support 现在对于大多数用途来说太有限了（只有 Firefox ~~和 Chrome，后者需要供应商前缀~~）。

您也可以使用[dir=rtl] 之类的属性选择器，但它只匹配明确设置了dir 属性的元素，而不匹配仅仅因为从父级继承而具有从右到左方向的元素。但您可以将其与其他选择器结合使用。

举个简单的例子，假设您只在body（或html）元素上设置了dir属性，在不同的页面上设置不同，并且您希望对所有页面使用相同的样式表但在不同的页面上做一些不同的事情。然后你可以使用例如

[dir=rtl] h1 { ... }

在从右到左的页面上设置h1 的一些规则。

【讨论】：