E企盈营销工具技术服务商 热线:4006-838-530

微信小程序样式大全(一)

E企盈直播平台营销卖货系统

1.尺寸pt:逻辑分辨率; pt的大小与屏幕的尺寸有关系,简单可以理解为长度和视觉单位px:指物理分辨率,和屏幕尺寸没关系1个pt可以有1个px构成,也可以有2个px,还可以有3个甚至更多iphone6是由2个px构成的以iphone6的物理像素750*1334为视觉稿进行设计,而在小程序中使用rpx为单位iphone6下 1px = 1rpx = 0.5pt使用rpx小程序会在不同分辨率的设备下自动进行转换,而px不会不是所有的单位都适合rpx,字体不适合rpx,会导致不同设备看不清2.设置全局字体样式app.wxss:text{ font-family:MicroSoft yahei; } 3.设置弹性盒子模型:.container{/*弹性模型*/display:flex;/*垂直方向 列方向 排布*/flex-direction:column;/*居中*/align-items:center;/*要从整体解决排布的问题是最好的方案*/}语法:水平主轴 justify-content: flex-start | flex-end | center | space-between | space-around垂直交叉轴 align-items: flex-start | flex-end | center | baseline | stretch(等高)交叉轴align-content: flex-start | flex-end | center | space-between | space-around | stretch; (多根水平轴线)换行:flex-wrap: nowrap | wrap | wrap-reverse(换行第一行在下面);flex-flow: flex-direction flex-wrap;居中:设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效   设置在盒子元素项目上的属性order: integer; 定义项目的排列顺序。数值越小,排列越靠前,默认为0。flex-grow: number; /* default 0 */ 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink: number; /* default 1 */ 定义了项目的缩小比例,flex-shrink属性为0,空间不足时,不缩小。flex-basis: length | auto; /* default auto */ 可设为跟width或height属性一样的值(比如350px),则项目将占据固定空间flex: none | [ ‘flex-grow’ ‘flex-shrink’? || ‘flex-basis’ ]align-self: auto | flex-start | flex-end | center | baseline | stretch; 允许单个项目有与其他项目不一样的对齐方式  示例:头尾固定,中间内容高度自适应撑开摘自#box{    width: 100%;    height: 100%;    display: flex;    flex-direction: column;}.header{    height: 100px;}.content{    flex-grow: 1;   // 这里的这个属性  因为之前用这个用的少,所以没有想到,这个属性是定义项目放大比例,默认是0,将他规定一下,然后就会把剩余的空间都给占掉}.footer{    height: 200px;}div id=”box”    div class=”header”/div    div class=”content”/div    div class=”footer”/div/div超出产生滚动条  overflow:auto

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序样式大全(一)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏