微信小程序样式大全（一）

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（换行第一行在下面）;

扫描二维码关注公众号，回复： 5643500 查看本文章

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

微信小程序样式大全（一）

猜你喜欢