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

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: ;

居中：设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

 

 

 

设置在盒子元素项目上的属性

order: ; 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow: ; /* default 0 */ 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink: ; /* default 1 */ 定义了项目的缩小比例，flex-shrink属性为0，空间不足时，不缩小。

flex-basis: | 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;
}



    

    

    

超出产生滚动条  overflow:auto