美文网首页
vue的设置根元素字体大小

vue的设置根元素字体大小

作者: 最念倾城 | 来源:发表于2020-04-26 12:36 被阅读0次
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1.0,user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
      //设置根元素字体大小
      document.documentElement.style.fontSize = document.documentElement.clientWidth/10 + 'px'
      console.log (document.documentElement.style.fontSize)
      // 监听 屏幕大小的改变
      window.addEventListener('resize',()=>{
        document.documentElement.style.fontSize = document.documentElement.clientWidth/10 + 'px'
      })
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
maximum-scale=1,initial-scale=1.0,user-scalable=no"
这一段代码是禁止屏幕缩放

相关文章

  • vue的设置根元素字体大小

  • 自适应

    rem 通过设置html根元素的字体大小 var deviceWidth = document.documentE...

  • rem布局

    rem( font size of the root element):相对于根元素的字体大小的单位在没有设置根节...

  • 移动端rem+vw适配

    介绍: rem: rem是相对单位,设置根元素 html 的 font-size,比如给 html 设置字体大小为...

  • 使用rem作为css响应式布局单位

    rem是以根元素(html)的字体大小为基准 要做到响应式,先设置html根元素的fontsize,并且让其能根据...

  • rem和em的区别

    关于rem和em的区别 rem rem:`表示根元素的字体大小`(通常为``) 下面是一个动态设置html字体大小...

  • 移动端开发自适应

    1、rem与em rem转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以...

  • 移动端适配方案(待续)

    meta viewport 媒体查询 根据查询结果选择不同的css样式 动态rem 通过根元素的字体大小来设置元素...

  • H5页面中字体大小动态配置

    html 元素是文档的根元素,对html设置了字体大小,其子元素会继承html字体的大小。 不同的浏览器默认有的默...

  • css小技巧搜集

    1.移动端字体大小适配 利用媒体查询器设置根元素的字体大小,并在开发时使用rem作为单位 2.sticky foo...

网友评论

      本文标题:vue的设置根元素字体大小

      本文链接:https://www.haomeiwen.com/subject/heudwhtx.html