CSS 经常使用布局在小程序中的应用

时间 2019-11-11

标签 css 经常使用布局程序应用栏目 CSS 繁體版

原文原文链接

CSS 经常使用布局在小程序中的应用

全部css布局的根本都是3个基本概念： 定位、浮动、外边距操纵

咱们其余的布局实现方式，都是基于正常的文档流来进行的。因此咱们先来看看什么是正常的文档流。css

正常文档流（Normal Flow）：正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。默认的文档流，确保在没有任何css样式的时候，还可以正确的渲染和显示内容。使页面具备比较好的可读性以及合理性。(position display float table flex-box grid-layout)
默认状况下，元素是如何布局的？（引用自 https://developer.mozilla.org）
首先，取得元素的内容来放在一个独立的元素盒子中，而后在其周边加上内边距、边框和外边距。(盒子模型）
一个块级元素的内容宽度默认是其父元素的100%，其高度与其内容高度一致。行内元素的height width与内容一致。你没法设置行内元素的height width。若是你想控制行内元素的尺寸，你须要为元素设置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)
那独立元素之间又是如何相互影响的呢？正常布局流是一套在浏览器视口内放置、组织元素的系统。默认状况下，块级元素按照在文档中书写出现的顺序放置 --- 每一个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。
行内元素的表现有所不一样 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其余行内元素、相邻的文本内容（或者被包裹的）被安排在同一行。若是空间不够，溢出的文本或元素将移到新的一行。
若是两个相邻的元素都设置了margin 而且两个margin有重叠，那么更大的设置会被保留，小的则会消失 --- 这被称为外边距叠加。

咱们在传统的css布局当中，不论是css2仍是css3，大体囊括了静态布局、流式布局、弹性布局、自适应布局、响应式布局、网格布局。对于css的这些布局方式，在小程序中又是怎样的呈现方式呢？咱们分别来看一看。html

1. 静态布局（Static Layout）

固定宽度布局。宽度以像素为单位。（固然咱们还可使用其余的绝对长度单位）
缺点：不管窗口多大，尺寸不变。没法充分利用空间。行长和文本易读性很差。
静态布局就是传统的网站形式：对于PC设计一个居中布局，窗口缩小时，内容被遮挡，呈现横竖向滚动条。对于移动设备，单独创建一个m.域名及相应的移动网站。

静态布局在小程序中通常不多出现。由于若是使用静态布局，就没法作到不一样屏幕自适应，750px的设计稿在小屏幕的手机上就会出现滚动条。css3

呈现效果以下：
小程序

// wxml 代码
<view class='page'>
  <view class='header'>静态布局</view>
  <view class='content'>
    <text>静态布局内容部分在小程序中的呈现。小程序page样式在overflow-x
上默认是hidden。</text>
  </view>
</view>


//样式以下
page {
  overflow-x:scroll;
}
.page, .header, .content {
  width: 750px;
}
.content {
  background: #ccc;
}

2. 流式布局（Liquid Layout）（百分比布局）

流式布局是页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。
使用百分比实现：流式布局可以相对于浏览器窗口进行伸缩。
缺点：窗口宽度较小，行变得很是窄，很难阅读。须要设置min-width来解决，可是若是min-width较大的话，也会有静态布局相同的限制。宽度太宽，一样会存在行长过长的问题。
流式布局（Liquid）的特色（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是若是屏幕尺度跨度太大，那么在相对其原始设计而言太小或过大的屏幕上不能正常显示。

咱们来看看在小程序中使用流式布局的效果：微信小程序

在不一样的屏幕大小下呈现出来的效果以下：
浏览器

<!-- wxml代码 -->
<view class='page fluid'>
  <view class='header fluid__header'>流式布局</view>
  <view class='content'>
  <!-- 两列 -->
    <view class='wrapper'>
      <view class='grid-item grid-half'>
        <text>我是左侧部分</text>
      </view>
      <view class='grid-item grid-half'>
        <text>我是右侧部分</text>
      </view>
    </view>
    <!-- 三列 -->
     <view class='wrapper'>
      <view class='grid-item grid-three'>
        <text>我是左侧部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是中间部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是右侧部分</text>
      </view>
    </view>
  </view>
</view>

/* css代码 */
.fluid, .content, .wrapper {
  width: 100%;
  box-sizing: border-box;
}
.wrapper {
  height: 200px;
  margin-bottom: 20px;
}
.wrapper .grid-item {
  height: 100%;
  background: #ccc;
  display: inline-block;
  box-sizing: border-box;
}
.wrapper .grid-half {
  width: 48%;
}
.wrapper .grid-half:nth-child(2n) {
  margin-left: 4%;
}
.wrapper .grid-three {
  width: 32%;
}
.wrapper .grid-three:not(:first-child) {
  margin-left: 2%;
}

3. 弹性布局（Flex Layout）

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素能够在任何方向上排布，也能够“弹性伸缩”其尺寸，既能够增长尺寸以填满未使用的空间，也能够收缩尺寸以免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。经过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）能够在两个维度上构建布局。

对Flex的理解能够参考阮一峰 Flex 布局教程：语法篇。在此不作详细说明。那咱们看看在小程序中Flex布局的使用。依然仍是上一个例子中的wxml，咱们只须要修改对应的class以及css便可。微信

<!-- wxml代码 -->
<view class='page fluid'>
  <view class='header fluid__header'>流式布局</view>
  <view class='content'>
  <!-- 两列 -->
    <view class='wrapper'>
      <view class='grid-item grid-half'>
        <text>我是左侧部分</text>
      </view>
      <view class='grid-item grid-half'>
        <text>我是右侧部分</text>
      </view>
    </view>
    <!-- 三列 -->
     <view class='wrapper'>
      <view class='grid-item grid-three'>
        <text>我是左侧部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是中间部分</text>
      </view>
      <view class='grid-item grid-three'>
        <text>我是右侧部分</text>
      </view>
    </view>
  </view>
</view>

/* css 代码*/
.wrapper {
  display: flex;
  height: 200px;
  margin-bottom: 20px;
  justify-content: space-between;
}

.wrapper .grid-item {
  height: 100%;
  flex: 1;
  background: #ccc;
}

.wrapper .grid-item:not(:first-child) {
  margin-left: 10px;
}

咱们可以看到与流式布局显示出来的效果是有必定的差异的，在item之间的margin值，咱们能够设定一个固定值，而不用去考虑item宽度的变化。而流式布局中想要实现这样的效果，只要想改变中间的间距，咱们都须要从新计算下item的宽度。固然在上一个流式布局的例子中还能够配合float或者使用padding来实现这一点。app

4. 自适应布局（Adaptive）

自适应布局（Adaptive）的特色是分别为不一样的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每一个布局中，页面元素不随窗口大小的调整发生变化。在pc以及移动端均可能涉及到的布局当中，咱们可使用媒体查询来实现不一样屏幕分辨的布局。示例

5. 响应式布局（Responsive layout）

响应式布局（Responsive）的特色是分别为不一样的屏幕分辨率定义布局，同时，在每一个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
能够把响应式布局看做是流式布局和自适应布局设计理念的融合。

6. 网格布局

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。
像表格同样，网格布局让咱们可以按行或列来对齐元素。然而在布局上，网格比表格更可能作到或更简单。例如，网格容器的子元素能够本身定位，以便它们像CSS定位的元素同样，真正的有重叠和层次。详情请参考阮一峰 CSS Grid 网格布局教程

咱们来看示例，如何实现一个三行三列的布局？n行n列呢？iphone

<!-- wxml代码 -->
<view class='page'>
  <view class='header'>
    <text>Grid 布局</text>
  </view>
  <view class='content'>
    <view class='wrapper'>
      <view class='grid-item'>
        <text>1</text>
      </view>
      <view class='grid-item'>
        <text>2</text>
      </view>
      <view class='grid-item'>
        <text>3</text>
      </view>
      <view class='grid-item'>
        <text>4</text>
      </view>
      <view class='grid-item'>
        <text>5</text>
      </view>
      <view class='grid-item'>
        <text>6</text>
      </view>
      <view class='grid-item'>
        <text>7</text>
      </view>
      <view class='grid-item'>
        <text>8</text>
      </view>
      <view class='grid-item'>
        <text>9</text>
      </view>
    </view>
  </view>
</view>

.wrapper {
  display: grid;
  /* grid-template-columns: 100px 100px 100px; */
  /* grid-template-columns: repeat(3, 100px); */
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100px 100px 100px; */
  /* grid-template-rows: repeat(3, 100px); */
  grid-template-rows: repeat(3, 100px);
}

.grid-item {
  background: #ccc;
  margin-top: 10px;
}

.grid-item:not(:nth-child(3n+1)) {
  margin-left: 10px;
}

6. vw, vh单位

视口百分比长度定义相对于viewport的大小的<length>值，即文档的可见部分。
vw: 视口宽度的1/100;
vh: 视口高度的1/100;
vmin: 视口高度和宽度之间的最小值的 1/100。
vmax: 视口高度和宽度之间的最大值的 1/100。

实现3行3列的示例：
xss

<view class='page'>
  <view class='header'>
    <text>vw、vh单位</text>
  </view>
  <view class='content'>
    <view class='wrapper'>
      <view class='grid-item'>
        <text>1</text>
      </view>
      <view class='grid-item'>
        <text>2</text>
      </view>
      <view class='grid-item'>
        <text>3</text>
      </view>
      <view class='grid-item'>
        <text>4</text>
      </view>
      <view class='grid-item'>
        <text>5</text>
      </view>
      <view class='grid-item'>
        <text>6</text>
      </view>
      <view class='grid-item'>
        <text>7</text>
      </view>
      <view class='grid-item'>
        <text>8</text>
      </view>
      <view class='grid-item'>
        <text>9</text>
      </view>
    </view>
  </view>
</view>

.page {
  padding: 5vw;
}
.grid-item {
  width: 28vw;
  height: 28vw;
  background: #ccc;
  display: inline-block;
  margin-bottom: 2vw;
}
.grid-item:not(:nth-child(3n+1)) {
  margin-left: 3vw;
}

在小程序中咱们更多考虑的是移动设备显示的效果，不会涉及到媒体查询的使用。所谓的自适应是指在page中的元素在不一样移动设备中的自适应。具体实现，可使用微信小程序的rpx单位，以及使用定位、浮动、Flex、Grid布局来实现。

总结

在这里我只是涉及到了各类布局的基本用法，其实每一种布局仔细研究起来都有不少须要讲解的东西，由于各类布局里面不少属性和特性都没有涉及到。在咱们实际应用中也会有各类布局需求。因此但愿你们在实际使用的时候在深刻的进行了解。

另外，正如这篇文章的标题所述，css布局在小程序的应用，咱们在h5页面中的布局能够说各式各样，有不一样的解决方案。这些布局概念一些是指某一类布局的归纳，有一些是指css能够实现的布局方式。

那在小程序中通常使用默认的rpx单位来对布局、字体大小作定义。在以上的例子中都没有使用到微信的rpx单位，关于rpx的理解，能够参照小程序官方文档。rpx（responsive pixel）: 能够根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。目的就是为了在不一样的屏幕分辨率下作到自适应。

CSS 经常使用布局在小程序中的应用