小程序 样式 WXSS

这篇具有很好参考价值的文章主要介绍了小程序 样式 WXSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

样式 WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。
与 CSS 相⽐,WXSS 扩展的特性有:

  • 响应式⻓度单位 rpx
  • 样式导⼊

尺⼨单位

rpx (responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有750个物理像素,则 750rpx = 375px = 750物理像素 , 1rpx = 0.5px = 1物理像素 。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
使⽤步骤:

  1. 确定设计稿宽度 pageWidth
  2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
  3. 在less⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。

样式导⼊

wxss中直接就⽀持,样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径。
⽰例代码:

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效!

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

⽬前⽀持的选择器有:

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro"的组件
#id #firstname 选择拥有 id="firstname"的组件
element view 选择所有 view 组件
element,element view,checkbox 选择所有⽂档的 view 组件和所有的 checkbox 组
nth-child(n) view:nth-child(n) 选择某个索引的标签
::after view::after 在 view 组件后边插⼊内容
::before view::before 在 view 组件前边插⼊内容

⼩程序中使⽤less

原⽣⼩程序不⽀持 less ,其他基于⼩程序的框架⼤体都⽀持,如 wepy , mpvue , taro 等。但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现

  • 编辑器是 vscode

  • 安装插件 easy less
    小程序 样式 WXSS,小程序,小程序

  • 在vs code的设置中加⼊如下,配置
    小程序 样式 WXSS,小程序,小程序

  • 在要编写样式的地⽅,新建 less ⽂件,如 index.less ,然后正常编辑即可。

  • List item文章来源地址https://www.toymoban.com/news/detail-797696.html

到了这里,关于小程序 样式 WXSS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 <view></view>容器嵌套,wxss样式修改内部内部样式不产生效果

    网上关于”微信小程序讲的知识很少“,微信开发文档对于新手不是很友好,但是建议一定要学会看文档。 问题如下: 我写了好几个view/view 容器嵌套,我在对内部容器包括的内容做修改时,不产生效果,后来发现这是因为引用方式有误。 ’ view 示例二/view   view class = 

    2024年02月17日
    浏览(53)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(67)
  • 微信小程序之WXSS模板样式、页面配置(.json)和网络数据请求

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月24日
    浏览(59)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(62)
  • WXSS的全局样式和局部样式

        WXSS中的样式和css差不多,是用于给WXML页面来设置样式的,但是WXSS中扩展了rpx尺寸单位和@import样式导入    rpx:根据不同的屏幕自动进行适配,把设备屏幕的宽度等分为750份(设备的总宽度750rpx)   @import: 用于进行样式的导入   1.新建一个文件夹p,在这个文件夹下建一个以

    2024年02月12日
    浏览(41)
  • 微信小程序wxss background

    微信小程序里遇到一个关于background的小问题,记录一下啦。 看,这是问题: 解决的方法: 其实人家已经告诉了解决方法 但是我愿意再抄一遍 1.把background属性 写为 采用 image 组件 沉底的方式实现 2.微信小程序view background-image 不能够直接显示本地,但是可以 直接显示网络图

    2024年02月16日
    浏览(55)
  • 小程序学习(五):WXSS模板语法

    1.什么是WXSS WXSS是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS 2.WXSS和CSS的关系   3.什么是rpx尺寸单位  4.rpx的实现原理  5.rpx与px之间的单位换算* 6.什么是样式导入  使用WXSS提供的 @import 语法,可以导入外联的样式表 7.@import的语法格式 8.全局样式 定义在 app

    2024年02月14日
    浏览(35)
  • 微信小程序 | 小程序WXSS-WXML-WXS

    🖥️ 微信小程序 专栏:小程序WXSS-WXML-WXS 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、WXSS编写程序样式 小程序的样式写法 WXSS支持的

    2024年01月23日
    浏览(70)
  • 微信小程序中使用SCSS编译WXSS

    旧版本的微信小程序是需要导入sass,新版本直接使用配置 !!!!!!!建议二选一去使用,防止冲突目前我使用的是旧版本的配置Sass!!!!!!!!!! 新版本开发者工具中的隐式设置可直接编译插件配置,在project.config.json加入以下代码即可编译SASS(参考项目配置文件 | 微信开放文档) 目前支

    2024年04月16日
    浏览(51)
  • 【小程序从0到1】WXSS模版语法汇总

    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 R e a c t / 小程序 🔥,中间穿插了一些基础知识的回顾 🌈博客主

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包