目录
1.尺寸单位
rpx(responsive pixel):可以根据屏幕宽度进行自适应,规定屏幕宽韦750rpx。如在iphone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素, 1rpx = 0.5px =1物理像素。
需求如下
/* pages/stylePage/stylePage.wxss */
/*
1.小程序中 不需要主动来引入样式文件
2.需要把页面中某些元素的单位 由 px 改为 rpx
1.设计稿 750px
750px = 750rpx
1px = 1rpx
2.把屏幕宽度改成375px
375px = 750 rpx
1px = 2 rpx
1rpx = 0.5px
3.存在一个设计稿 宽度414 或者 位置 page(当设计稿不符合750px的要求的时候,需要前端自己算rpx)
1.设计稿 page 存在一个元素 宽度 100px
2.拿以上的需求 去实现 不同宽度的页面适配
page px = 750 rpx
1px = 750rpx / page
100px = 750rpx / page * 100
4 利用一个属性 calc属性, css和wxss 都支持这个属性(当设计稿不符合750px的要求的时候,需要前端自己算rpx)
运算符之间加空格
*/
view{
/* width: 200rpx; */
height: 200rpx;
font-size: 40rpx;
background: aqua;
width:calc(750rpx / 375 * 100)
}
2.样式导入
wxss中直接就支持,样式导入功能
也可以和less中的导入混用
使用@import语句可以导入外联样式表,支持相对路径。
3.选择器
小程序除了不支持通配符 * 之外,其他都和css一样
4.小程序中使用less (sass也是一样的)
原生小程序不支持less,其他基于小程序的框架大体都支持,如wepy,mpvue,taro.但是仅仅因为一个less功能,而去引入一个框架,肯定是不可取的,因此可以用以下方式来实现
step1:vscode编辑器
step2:在vscode下载拓展工具
step3:在vscode的设置中加入如下的配置
"less.compile":{
"outExt":".wxss"
}
设置1
设置2
设置3
step4:在要编写样式的地方,新建less文件,如index.less,然后正常编辑即可。