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. HDU3377 Plan

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3377 简单路径要求权值最大,那么为了回避括号序列单独插头的情况特判多,考虑使用最小表示法. #incl ...

  2. python3 items() 与 python2 中iteritems()的区别

    在Python2.x中, iteritems() 用于返回本身字典列表操作后的迭代 Python 3.x 里面, iteritems() 方法已经废除了,而 items() 得到的结果是和 2.x 里 ...

  3. kbengine学习1 安装

    KBengine一年前就知道了,但是没来得及学(只记得是C++ + python脚本),前一个项目unity3d+fkask+socketio+sqlite硬怼出来的.这半年也没来得及管.(好像当时看 ...

  4. C#定义只能处理枚举类型的泛型类型

    internal sealed class GenericTypeThatRequireAnEnum<T> { ; //该 static 字段在不同的封闭类型之间是独立不共享的 //静态构 ...

  5. UCS2编码

    UCS2就是标准的unicode编码, 它是某国际组织设计的一种文字符号编码表,包括了世界上绝大多数文字和符号,包括中文,每个字符使用2字节编码,因此叫ucs2. 这里有一篇文章对Unicode编码做 ...

  6. Win7无法保存共享帐户密码

    每次机器重启完之后,网络共享的密码总是要重新输入. [记住我的凭据]选项不起作用. 查到了下面百度经验的文章,挺靠谱的. https://jingyan.baidu.com/article/59a01 ...

  7. 在Spring Boot中使用 @ConfigurationProperties 注解, @EnableConfigurationProperties

    但 Spring Boot 提供了另一种方式 ,能够根据类型校验和管理application中的bean. 这里会介绍如何使用@ConfigurationProperties.继续使用mail做例子. ...

  8. MyBatis-session-SqlSession

    The SqlSession instance is the most powerful in MyBatis. It is where you'll find all of the methods ...

  9. (转)解决windows10下无法安装.net framework 3.5,错误代码0x800F081F

    1.下载 NET Framework 3.5的安装包netfx3.cab 将下载的文件复制到复制到 C 盘的 Windows 文件夹 后请在“命令提示符(管理员)”中执行下面的命令: dism /on ...

  10. LeetCode--008--字符串转换整数 (atoi)(java)

    请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...