vue scoped html 样式无效

Question

登录页用了单独的样式,所以我想给登录页加 scoped 用来作用于当前页面,但是html的效果没有了,小级别的样式可以

这个无效了
@media screen and (min-width: 1600px) {
  html {
    font-size: 100px;
  }
}

这样的还有效:
.container {
  width: 100%;
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
}

Answer 1

scope的没办法控制组件之外的的元素的属性

Answer 2

@厦冰 说的对，这么写就可以了。

<style>
@media screen and (min-width: 1600px) {
  html {
    font-size: 100px;
  }
}
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
}
</style>

Answer 3

当前组件：

    <template>
        <div class="page"></div>
    </template>

添加scoped的话，你只能控制.page{width:100px;}及其内部的样式，像这种body，html需要在全局进行设置；并且你若是在全局样式中写了另一个.page{width:50px;}，也会影响到当前页面的.page