WXSS选择器权重与优先级

权重案例:
微信小程序(适配小结、移动端1px与选择器权重)

适配小结,关键词:

微信小程序(适配小结、移动端1px与选择器权重)

媒体查询

1) 媒体查询
利用设备像素比缩放,设置小数像素;css与js写法任选其一

css写法
微信小程序(适配小结、移动端1px与选择器权重)
js写法
微信小程序(适配小结、移动端1px与选择器权重)
优点:简单,好理解
缺点:兼容性差,目前之余IOS8+才支持,在IOS7及其以下、安卓系统都是显示0px

2)设置 border-image 方案
iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的来看下面iOS设置的截图中的border

微信小程序(适配小结、移动端1px与选择器权重)

border-image 方案

1)设置 border-image 方案
从上面的截图可以看到iOS7的设计是非常精细的,border是一根非常细的线。可以使用border-image实现iOS7的border效果。

通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰

2)设置 border-image 方案
border-width:指定边框的宽度,可以设定四个值,分别为上右下左border-width: top right bottom left。
border-image:该例意为:距离图片上方2px(属性值上没有单位)裁剪边框图片作为上边框,下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框,以拉伸方式展示

3)利用box-shadow阴影也可以实现
微信小程序(适配小结、移动端1px与选择器权重)
box-shadow属性的用法:box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]

transform方案

如果你想给一个元素加一个1px的边框可以利用到伪元素,在这个方案下边框加圆角也很容易实现,具体代码如下
微信小程序(适配小结、移动端1px与选择器权重)
微信小程序(适配小结、移动端1px与选择器权重)

媒体查询 + transfrom

5)媒体查询 + transfrom 对方案1的优化
微信小程序(适配小结、移动端1px与选择器权重)

相关文章:

  • 2021-10-12
  • 2021-07-24
  • 2021-12-03
  • 2021-12-01
  • 2022-12-23
  • 2022-12-23
  • 2021-08-26
  • 2021-12-08
猜你喜欢
  • 2021-12-03
  • 2021-11-21
  • 2021-11-20
  • 2021-11-21
  • 2021-09-20
相关资源
相似解决方案