一、Flex布局

（1）简介

1) Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2) 任何一个容器都可以指定为 Flex 布局，行内元素也可以使用Flex布局。

3)注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

4)采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。

交叉轴的开始位置叫做cross start，结束位置叫做cross end，项目默认沿主轴排列。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

（2）属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

Flex布局具体学习网站：Flex 布局语法教程 | 菜鸟教程

二、移动端相关知识

（1）物理像素

屏幕的分辨率，设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

（2）设备独立像素&css像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代

表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就

不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

（3）dpr比&DPI&PPI

1) dpr:
设备像素比，物理像素
/
设备独立像素
= dpr
，一般以
Iphon6
的
dpr
为准
dpr = 2

2) PPI:
一英寸显示屏上的像素点个数

3) DPI
：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

（4）移动端适配方案

1）viewport适配

原因：

a)
手机厂商在生产手机的时候大部分手机默认页面宽度为
980px

b)
手机实际视口宽度都要小于
980px
，如
: iphone6
为
375px

c)
开发需求：需要将
980
的页面完全显示在手机屏幕上且没有滚动条

实现代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2）rem适配

原因：

a)
机型太多，不同的机型屏幕大小不一样

b)
需求：一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不同的变化，页面中的内容也相应变化

实现代码：

function remRefresh() {
let clientWidth = document.documentElement.clientWidth; // 将屏幕等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px'; }
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})

记录微信小程序开发学习过程，欢迎学习交流！

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/93479.html