1. 尽量采用flex 布局,指定flex-direction是row( 从左到右)还是column (从上到下)

特别要记得写 flex-wrap: wrap; 不然超出屏幕部分不会换行

  display: flex;
flex-direction: row;
flex-wrap: wrap;
width:690rpx;

2. 美工设计是按Iphone6, 750px*1334px的尺寸设计。切图的尺寸对应wxss里的rpx, 1rpx=0.5px

3. 容器的图片文字居中

.col3
{
margin-left:auto;
margin-right:auto;
text-align: center;
width:230rpx;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.col3 image{
margin-left:auto;
margin-right:auto;
}

小程序WXSS布局的更多相关文章

  1. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  2. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  3. 微信小程序开发入门学习(2):小程序的布局

    概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...

  4. 微信小程序wxss样式详解

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  5. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  6. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  7. 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

    一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...

  8. 微信小程序-WXSS

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,我们的 WXSS 具有 ...

  9. less文件编译成微信小程序wxss文件

    2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...

随机推荐

  1. XML.libXml2_ZC

    1.字符串比较函数: xmlStrcmp(...) 这是大小写敏感的比较 xmlStrcasecmp(...) 这是大小写不敏感的比较(忽略字符串里面字符的大小写) 2.查找节点 2.1.循环 2.2 ...

  2. npm和yarn的区别

    npm和yarn的区别,我们该如何选择? 周一入职,同事JJ让我熟悉一下基于React的新项目.按照以往,我的步骤都是: git clone xxx npm install npm run dev 这 ...

  3. vue-cli3快速创建项目

    文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...

  4. MYSQL的基本函数 (数学函数)

    ABS(x)   返回x的绝对值 BIN(x)   返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x)   返回大于x的最小整数值 EXP(x)   返回值e(自然对数的底) ...

  5. Windows下使用创建多层文件夹 SHCreateDirectoryEx 函数需要注意的问题

    1.在使用SHCreateDirectoryEx函数创建多层文件夹的过程中,发现在文件夹路径中,只能使用\\而不能使用/,否则将创建文件夹失败. 2.下面为在MFC中使用的代码片段 CString n ...

  6. 最简单的解决Chrome浏览器主页被hao123、360和2345篡改的方法是什么

    最简单的解决Chrome浏览器主页被hao123.360和2345篡改的方法是什么 一.总结 一句话总结:打开chrome的安装目录,将chrome.exe改成chrome1.exe即可,然后发送一个 ...

  7. 怎么从bam文件中提取出比对OR没比对上的paired reads | bamToFastq | STAR

    折腾这么多都是白瞎,STAR就有输出没有别对上的pair-end reads的功能 参见:How To Filter Mapped Reads With Samtools I had the same ...

  8. 单分子荧光原位杂交(smFISH)

    single-molecule RNA fluorescence in situ hybridization (RNA smFISH) 单分子荧光原位杂交(smFISH)是一种新的基因表达分析方法,能 ...

  9. GreenDao使用解析

    GreenDao是一个轻量级的数据库框架,相比Xutils 等他的速度和效率会更快更好 这里展示GreenDao 的使用方法 ①建立 compile 'org.greenrobot:greendao: ...

  10. apiCloud 上拉加载

    api.addEventListener({ name:'scrolltobottom', extra:{threshold:} }, function(ret, err){ //上拉加载时需要加载的 ...