Invalid vue scoped html style

The

login page uses a separate style, so I want to add scoped to the login page to act on the current page, but the effect of html is gone, and small-level styles can be


@media screen and (min-width: 1600px) {
  html {
    font-size: 100px;
  }
}

:
.container {
  width: 100%;
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
}

Html5 css vue-loader vue.js javascript

Mar.12,2021

@ Xiamen Bing is right, just write it this way.

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

scope has no way to control the attributes of elements outside the component

current component:

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

if you add scoped, you can only control the .page {width:100px;} and its internal style. Such body,html needs to be set globally; and if you write another .page {width:50px;} in the global style, it will also affect the .page

of the current page.

Previous: After hexo modifies the nexT theme locally, it cannot push to github

Next: How to change the color of element-ui 's el-tooltip arrow by css