微信小程序开发储备知识

目录

一、Flex布局

二、移动端相关知识

（1）物理像素

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

（3）dpr比&DPI&PPI

 （4）移动端适配方案

---

一、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)
})

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