修改element.style内联样式

2018-12-13  本文已影响0人  崠崠

使用jqweui的拓展组件picker的时候,在浏览器尺寸不同的时候,一些尺寸下组件的样式会出错

Plus 机型.png Plus 以下尺寸.jpg

很容易看出布局出错是因为字体大小过大出错

查看 query-weui.css

html {
  font-size: 20px ;
}
body {
  font-size: 16px;
}
@media only screen and (min-width: 400px) {
  html {
    font-size: 21.33333333px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 22.08px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 25.6px !important;
  }
}

jquery-weui.css对尺寸400px、414px、480px的机型使用了 !important规则,覆盖了其余的html样式字体申明
在iPhone 6机型下,在Styles 选定全局搜索font-size


发现系统默认的样式CSS中 内联样式将字体设置为 50px html 样式

element.style 内联样式,具有最高的优先级,在网上搜索出的方法就是跟jquery-weui.css 对3种尺寸的做法类似,增加!important 规则,覆盖系统样式

参考文献:

CSS:层叠样式 优先级
样式表中的 element.style样式如何修改

上一篇 下一篇

猜你喜欢

热点阅读