美文网首页
修改element.style内联样式

修改element.style内联样式

作者: 崠崠 | 来源:发表于2018-12-13 16:45 被阅读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样式如何修改

相关文章

  • 修改element.style内联样式

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

  • !important ——语法优先权

    一.什么时候使用 1.修改element.style内联样式 我们在写前面 web页面样式的时候,会发现有些时候,...

  • Day07

    一.样式 1.1内联样式和常规样式 常规样式的话,方便调试修改而内联样式写法不方便修改和调试 二.输入框和表单 1...

  • CSS1

    第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...

  • 随笔

    如何修改element.style样式 相信很多朋友在修改主题css时遇到过一些问题,比如说出现这个elememt...

  • DOM样式操作

    更新样式 element.style:增加了内嵌样式表,每一次设置属性都只能一句句设置element.style ...

  • CSS修饰

    1. 内部样式 2. 内联样式 3. 引用外部样式 内部样式如下: 内联样式如下: 引用外部样式 优先级:内联样式...

  • 样式——修改文字的大小,颜色之类的

    1)外部样式表插入:即通过一个外部的css文件,来对样式进行修改 2)内部样式表 3)内联样式表

  • 前端知识 | css样式的引用方式及不用引用方式的解析优先级

    在html页面中引用css的方式有3种:分别是内联样式、内部样式和外联样式。 一、 内联样式 内联样式写在html...

  • CSS操作

    element.style既可以设置行内样式,也可以读取行内样式。可读可写 Element.style.cssTe...

网友评论

      本文标题:修改element.style内联样式

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