修改element.style内联样式

使用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样式如何修改

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,908评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,019评论 24 450
  • 我希望有个平台可以集合所有不同兴趣的人让彼此了解对方的兴趣 甚至合作完成一个作品 你唱歌我写词 你写作我提供灵感 ...
    漫无目的地行走阅读 348评论 0 0
  • 一年前,qq闪动,请求加为好友的一个提示,让我认识了一个男孩。 我们是同一个县城的,当时的他在北京准备回老家找工作...
    我喜欢的人叫y阅读 152评论 0 0