vue scoped html 样式无效

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

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

这样的还有效:
.container {
  width: 100%;
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
}
阅读 6.8k
3 个回答

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

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

<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>

当前组件:

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题