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

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

微信小程序样式大全（一）相关推荐

小程序测试用例模板_微信小程序样式：高质量小程序样式模板大全
新手想要制作出美观的小程序,你需要多参考一些好看的微信小程序样式.今天就带大家分析几个高质量小程序的样式,看看别是怎么把小程序做得美观又吸引人的: 1.电商小程序样式电商小程序首页一般是按照&quo ...
微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐语法 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 西方语言都是从左向右读,所有 text-align 的默认值是 left.文 ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
微信小程序推荐大全之201~300个
本文摘要:小程序商店-极乐小程序商店推荐100个微信小程序,包含各行业的微信小程序大全,你需要的小程序都在极乐小程序商店. 201.爱奇艺视频爱奇艺视频小程序简介:爱奇艺视频小程序为用户提供了正版. ...
微信小程序样式 WXSS
微信小程序样式 WXSS 样式基础尺寸单位样式导入内联样式选择器 less语法样式基础类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示. WXSS 具有 CSS ...
HTML微信小程序的页眉代码,微信小程序样式wxss各种问题总结（不断更新）
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
微信小程序推荐大全100个
2019独角兽企业重金招聘Python工程师标准>>> ###101.华住酒店+ 华住酒店+小程序简介:华住酒店官方小程序,提供在线预订及咨询服务. <img src=&quo ...
uniapp中使用uview组件u-icon 编辑到微信小程序样式问题
在微信小程序中用u-icon标签选择器才能对其设置样式,但在h5预览中u-icon{ }这样设置样式不生效,用组件的customStyle属性才生效.所以干脆对不同平台用不同写法: <!-- # ...
微信小程序样式-元素选择器的使用
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua CSS 元素选择器最常见的 CSS 选择器是元素 ...

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

微信小程序样式大全（一）相关推荐

最新文章

热门文章