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. 常见的Java面试题及答案整理

    1. 基础篇 1. 面向对象特征:封装,继承,多态和抽象 封装封装给对象提供了隐藏内部特性和行为的能力.对象提供一些能被其他对象访问的方法来改变它内部的数据.在 Java 当中,有 3 种修饰符: p ...

  2. loglog()函数

    数据: xd = [1, 2, 3] yd = [0.6, 0.2, 0.2] matlab中双对数函数: 命令: loglog(xd, yd, 'blacko-', 'MarkerFaceColor ...

  3. Android开发代码规范总结

    本篇开始总结Android开发中的一些注意事项,提高代码质量(仅供参考): 1.  Activity间的数据通信,对于数据量比较大的,避免使用 Intent + Parcelable 的方式,可以考虑 ...

  4. windows版 Java调用人脸识别离线sdk

    最近因工作需求在java-web服务中调用人脸识别离线sdk,主要通过JNA及JNI技术,但均未调试通过,JNA调用时出现以下异常,一直未解决,求大佬指点,导常信息如下: in BaiduFaceAp ...

  5. linux基础02-bash特性

    Linux的行结束符是:[$] Windows的行结束符是:[$+回车] 目录管理:ls.cd.pwd.mkdir.rmdir.tree 文件管理:touch.stat.file.rm.cp.mv.n ...

  6. AtCoder Regular Contest 103 E Tr/ee

    Tr/ee 思路:按照下图所示连接 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #inclu ...

  7. web前端名人的博客微博Githu

    尤雨溪 vuejs作者 王垠  http://www.yinwang.org/ 20位活跃在Github上的国内技术大牛  1. lifesinger(玉伯)  Github主页:        ht ...

  8. web component的理解

    https://www.zhihu.com/question/58731753 https://www.zhihu.com/question/39328603 http://www.cnblogs.c ...

  9. Jedis与Lua脚本结合

    使用Lua脚本的好处    1.减少网络开销:可以将多个请求通过脚本的形式一次发送,减少网络时延和请求次数. 2.原子性的操作:Redis会将整个脚本作为一个整体执行,中间不会被其他命令插入.因此在编 ...

  10. phalcon的save方法保存失败?

    phalcon的save方法保存失败? 因为表中设置了一个字段:disabled, 默认值是1, 在创建数据的时候,disabled没有传值过去,导致save方法一直是false, 当返回false时 ...