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

2019-07-14 admin

所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵

我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。

正常文档流(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的这些布局方式,在小程序中又是怎样的呈现方式呢?我们分别来看一看。

1. 静态布局 (Static Layout)

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

静态布局在小程序中一般很少出现。因为如果使用静态布局,就无法做到不同屏幕自适应,750px的设计稿在小屏幕的手机上就会出现滚动条。

呈现效果如下: 图片描述

// 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即可。

Flex布局iphone5 Flex布局大尺寸

<!-- 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来实现这一点。

4. 自适应布局 (Adaptive)

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

5. 响应式布局 (Responsive layout)

响应式布局(Responsive)的特点是分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

6. 网格布局

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

我们来看示例,如何实现一个三行三列的布局?n行n列呢?

图片描述

<!-- 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列的示例: 图片描述

<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物理像素。目的就是为了在不同的屏幕分辨率下做到自适应。

[转载]原文链接:https://segmentfault.com/a/1190000019757294

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69752.html

文章标题: CSS 常用布局在小程序中的应用

相关文章
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
H5即将迎来黄金时代 轻应用再成行业焦点
鎽樿�侊細浠庣伀閫熻交搴旂敤鑾峰緱鎶曡祫绛変腑涓嶉毦鐪嬪嚭锛孒TML5鍗冲皢杩庢潵榛勯噾鏃朵唬銆傝秺鏉ヨ秺澶氱殑浼佷笟鎴栧垱涓氳€呭紑濮嬫秹瓒矵5锛岃�╄交搴旂敤鍐嶆�℃垚涓鸿�屼笟鐨勭劍鐐癸紝鎺ヤ笅鏉ュ皢鏈夋洿澶欻5寮曟搸浠ュ強鏇村�欻5...
2015-11-12
回到顶部