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. 基于 Python 和 Pandas 的数据分析(5) --- Concatenating and Appending

    这一节我们将会介绍几种不同的合并数据的方法. 在我们这个不动产投资的例子中, 我们希望获取 51 个州的房产数据, 并把它们组合起来. 我们这样做有很多原因. 这样做既便于我们做分析, 同时也可以占用 ...

  2. 什么是 MIME TYPE?

    文章来源: http://baike.baidu.com/item/MIME https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_H ...

  3. Spring Security 中的加密BCryptPasswordEncoder

    // // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler ...

  4. 串口.Qt532测试(异步)

    环境:Win7x64.Qt5.3.2 MSVC OpenGL(x86).vs2010(x86) 项目所在位置:E:\Project_Qt532\SeriesPort_Qt532_Z ZC:这里 同步方 ...

  5. leecode第二十一题(合并两个有序链表)

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  6. RedHat/CentOS根目录扩容

    下面以redhat为例,介绍如何扩容系统根目录,CentOS也是一样的. 1. 登录到系统中,查看硬盘情况. /dev/sdb就是增加的硬盘. [root@test ~]# fdisk -l 2. 操 ...

  7. 多线程工具之CompletionService

    这里涉及到Java的多线程并发知识,以及线程池相关的知识.就不在此说明了.具体说说CompletionService的应用场景和使用方法. 比如我们有10个线程需要丢到线程池里面去执行,然后把10个线 ...

  8. ThinkPHP表单自动验证(注册功能)

    控制器中: 模型中: 视图中:

  9. HeadFirst Ruby 第十五章总结 Saving and loading data

    前言 在上一章讲述了如何进行基础的操作,比如 处理 GET 请求的 get route, 再比如下载 gem 等等方面的知识.在这一章节,作者告诉我们如何储存.处理数据.整个过程分三步走: 首先,当 ...

  10. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格动态加载

    jQuery EasyUI 树形菜单 - 树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(Tree ...