前言

微信小程序在无论在功能、文档及相关支持方面，都是优于前面几种微信账号类型，它提供了很多原生程序才有的接口，使得我们的小程序在很多方面突破H5页面应用的限制，更加接近原生程序的功能，因此微信小程序具有很大的前景想象力。

文章目录

前言
1、Flex 布局
- Ⅰ-基本知识点概念
2、移动端相关知识点
- Ⅰ-物理像素
- Ⅱ-设备独立像素、 css 像素
- Ⅲ-dpr比、DPI 、PPI
3、移动端适配方案
- Ⅰ-viewport 适配
- Ⅱ- rem 适配

1、Flex 布局

Ⅰ-基本知识点概念

Flex基本概念

1） Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
1. 任何一个容器都可以指定为 Flex 布局。
2. display: ‘flex’

4）这部分是一阶段基础知识,可看文档学习

在小程序中,通常使用<view/>代替<div/>作为容器来做布局–>代码示例在第一章的第三小节第三点

2、移动端相关知识点

Ⅰ-物理像素

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

Ⅱ-设备独立像素、 css 像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

Ⅲ-dpr比、DPI 、PPI

概念
1. dpr: 设备像素比，物理像素/设备独立像素 = dpr，一般以 Iphon6 的 dpr 为准 dpr = 2
2. PPI: 一英寸显示屏上的像素点个数
3. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰
不同机型对比表

部分机型图示

3、移动端适配方案

这是个面试考点

Ⅰ-viewport 适配

为什么做 viewport 适配 ?

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

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

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

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

Ⅱ- rem 适配

为什么做 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)
})

第三方库实现

lib-flexible + px2rem-loader

【微信小程序丨第三篇】小程序的基础知识储备相关推荐

红领巾小创客机器人活动计划_红领巾小创客活动方案三篇
每一个孩子具有一颗美丽的心灵,首先要培养孩子具有一双发现美的眼睛.队员通过摄影.绘画.制作等形式发现.创造美.下面是小编带来的三篇红领巾小创客活动方案,希望对大家有所帮助! 红领巾小创客活动方案1 一 ...
计算机与科技小故事,科学童话小故事大全【三篇】
[导语]科学小故事在我们生活的各个角落,疑问几乎无处不在,而这些疑问往往能激发孩子们珍贵的求知欲,它能引领孩子们正确的认识和了解世界,并进一步地探知世界的奥秘,是早期教育最为关键的环节.下面是无忧考网 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
【深入剖析Tomcat笔记】第一篇基础知识储备
基础知识储备最近突然在想,做了这么久的WEB相关,像tomcat.apache这些服务器究竟是什么东西,恰好碰到<How Tomcat Works>(中文版<深入剖析Tomcat& ...
【网络通信】【电信运营商实战工程师】思科设备篇-网络工程师必备基础知识
电信运营商实战工程师系列文章. 思科设备篇-网络工程师必备基础知识. 文章目录 1. 电信运营商网络设备机房 2. 认识并管理运营商网络设备 3. GNS3 安装与配置 4. IPv4地址及子网划分 ...
第三十二章 XML基础知识概念
文章目录第三十二章 XML基础知识概念 attribute CDATA区域 comment content model default namespace DOM DTD(文档类型定义) eleme ...
疯狂的大柚柚带你玩转MSP-ESP430G2(基础篇) -----（六）基础知识补充
疯狂的大柚柚带你玩转MSP-ESP430G2(基础篇) (六)基础知识补充常用数据类型数据类型字节数值范围 Char 1 -128~127 Unsigned char 1 0`255 shor ...
微信小程序简介、设计规范、运营规范等基础知识
微信小程序开发须知微信小程序开发前的需要了解的基础知识. 下文为阅读微信官方文档·小程序后的总结和提炼. 一.小程序介绍微信官方介绍文档 - 点击跳转微信小程序类似流应用,用户使用时无需安装,直 ...
计算机公开课课前互动小游戏,课前三分钟小游戏公开课课前精彩互动
课前三分钟小游戏是什么,公开课课前精彩的互动有哪些,小编整理了相关信息,希望会对大家有所帮助! 课前三分钟的游戏有哪些兔子舞一.目的:活动筋骨,让学员在良好的精神状态下上课. 二.时间:5分钟三 ...

【微信小程序丨第三篇】小程序的基础知识储备

前言

文章目录

1、Flex 布局

Ⅰ-基本知识点概念

2、移动端相关知识点

Ⅰ-物理像素

Ⅱ-设备独立像素、 css 像素

Ⅲ-dpr比、DPI 、PPI

3、移动端适配方案

Ⅰ-viewport 适配

Ⅱ- rem 适配

【微信小程序丨第三篇】小程序的基础知识储备相关推荐

最新文章

热门文章