• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 微信小程序输入框样式怎么导入?

微信小程序输入框样式怎么导入?

时间:2023-07-01 14:05 阅读数:125 人阅读 分类:知识百科

  微信小程序输入框样式怎么导入?各位亲们如果要开发微信小程序输入框样式,可以参考小编整理的方法哦,以下就是微信小程序输入框样式怎么导入的步骤了,赶快跟着小编往下看看吧!

  微信小程序输入框样式怎么导入?

  1、微信小程序输入框尺寸单位

  微信小程序输入框可以根据屏幕宽度进行自适应。微信小程序输入框规定屏幕宽为750rpx。如在 iPhone6 上,宽度为375px,一共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

  

  rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

所以各位亲们在开发微信小程序时设计师可以用iPhone6 作为视觉稿的标准。

正是因为这样,在较小的屏幕上是肯定会有不可避免的毛刺哦,您可以在开发的时候尽量避免这种情况发生。

  2、微信小程序输入框样式导入

  如果大家使用@import语句,那么也可以导入外联样式表哦,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

  示例微信代码:

  /** common.wxss **/

  .small-p {

  padding:5px;

  }

  /** app.wxss **/

  @import "common.wxss";

  .middle-p {

  padding:15px;

  }

  3、微信小程序输入框全局样式与局部样式

  定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中自定义菜单的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

  4、微信小程序输入框样式表不支持级联选择器

  WXSS支持以.开始的类选择器。如:

  .normal_view {

  color: #000000;

  padding: 10px;

  }

  可以使用微信标签选择器,控制同一类组件的样式。如:使用input标签选择器控制的默认样式。

  input {

  width: 100px;

  }

  5、微信小程序输入框本地资源无法通过 css 获取。

尤其需要注意background-image不能用于设置本地背景图片,background-image:可以使用网络图片,或者 base64。

  微信小程序输入框样式怎么导入的方法就介绍到这里了,各位亲们看完以上内容后都知道微信小程序输入框样式怎么导入了吗?以上内容供大家参考哦,祝大家都能成功。感谢大家的关注微微风。

更多推荐:

  微信小程序开发者工具怎么使用? 

  微信小程序开发语言,微信小程序开发用什么语言?

  微信小程序傻瓜式开发工具