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. pyqt 不规则形状窗口显示

    #coding=utf- import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QWidget, QApplicatio ...

  2. python中while循环运算符及格式化输出

    一,while循环 while 条件: while语句块(循环体) 运行: 判断你给的条件是否为真,如果真则执行循环体.否则跳出循环. 执行完循环体之后再次判断条件是否为真 例子1 我们玩联盟的时候喷 ...

  3. java添加templates模板,httpServlet模板改写

    为了提高开发效率,通常将一些常用模板添加到快捷键,方法: window-prefrerences-java-editor-templates 代码复制进去apply应用即可 package com.l ...

  4. Hadoop如何将TB级大文件的上传性能优化上百倍?

    这篇文章,我们来看看,Hadoop的HDFS分布式文件系统的文件上传的性能优化. 首先,我们还是通过一张图来回顾一下文件上传的大概的原理. 由上图所示,文件上传的原理,其实说出来也简单. 比如有个TB ...

  5. 大数据新手之路二:安装Flume

    Ubuntu16.04+Flume1.8.0 1.下载apache-flume-1.8.0-bin.tar.gz http://flume.apache.org/download.html 2.解压到 ...

  6. 第 3 章 镜像 - 013 - Dockerfile 构建镜像

    第一个 Dockerfile FROM ubuntu RUN apt-get update && apt-get install -y vim 运行 docker build 命令构建 ...

  7. JS中如何生成全局变量

    JS中如何生成全局变量 一.总结 一句话总结:在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量 在函数内没用var声明的一般为全局变量 1.js中的函数中的this指向的是谁? ...

  8. word中的交叉引用

    分别使用“交叉引用”依次插入所需应用文献编号范围的第一个和最后一个. 所需引用处出现“[1][3]”   在引用处对两个编号操作:点击鼠标右键-选择“切换域代码”. [1]变为” {REF _Ref4 ...

  9. Javascript 第五章总结:A trip to Objectville

    前言 在以前的代码中,我们使用 primitive 类型的变量和 procedural manner 来执行脚本.但是,更好的办法是 object-oriented (面向对象)的.作者说:它能让我们 ...

  10. 20181013xlVba年级报表拆分为班级报表

    '年级报表拆分为班级报表 Public Sub CreateClassReport() Application.DisplayAlerts = False Dim Wb As Workbook Dim ...