码迷,mamicode.com
首页 > 微信 > 详细

小程序WXSS布局

时间:2018-10-21 10:19:19      阅读:1330      评论:0      收藏:0      [点我收藏+]

标签:屏幕   ali   class   切图   bsp   尺寸   enter   wrap   auto   

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布局

标签:屏幕   ali   class   切图   bsp   尺寸   enter   wrap   auto   

原文地址:https://www.cnblogs.com/zitjubiz/p/9823726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!