前言
本文主要介绍移动端页面开发的一些基础知识及要点。
移动端与 PC 端区别
- w3c 标准支持情况不同,移动端浏览器和 PC 端浏览器对一些 JS 和 CSS 的支持情况是不同的,可以在
caniuse.com
网站上进行查询; - 交互不同,由于屏幕大小不一样,适合在 PC 端上使用的组件在移动端上交互会有所变化,一些页面内容需要触发才会进行展示;
- 布局实现不同,在移动端没有 IE 的限制,布局实现方式在某些兼容性场景下,布局实现的方式比 PC 端多,比如较为典型的
flex
布局; - 性能考虑方向不同,一是移动端需要考虑弱网络环境,比如页面在 4/5 G 情况下页面加载效果会有所差异,二是移动端需要考虑图片适配和压缩问题等等;
- 浏览器性能问题。
移动端设备基础概念
- 物理像素:设备屏幕的分辨率,设备出厂后就是固定的了,比如
iPhone6
的分辨率参数如下: - 设备独立像素:与设备无关的像素,也就是 CSS 像素,它通过程序控制来实现。
- 设备逻辑像素:在 PC 端浏览器模拟的 iphone6,即为逻辑像素,也称为逻辑分辨率。
- 设备像素比,英文简称 DPR。称为设备像素缩放比,表示设备物理像素与设备独立像素的比例,也就是真实分辨率与 CSS 编程像素的比例,计算公式如下:
eg:DPR = 2,表示一个方向上 2 个物理像素对应一个 CSS 像素。则在屏幕上(2 个方向),使用 4 个物理像素显示一个 CSS 像素。
- PPI,像素密度,表示每英寸的像素数目,数值越高,说明屏幕能以更高密度显示图像。
PPI = / 屏幕尺寸
viewport 基础概念
- width:
layout width
可以理解为页面的宽度,width=device-width
是指页面的宽度等于设备宽度。当width
宽度设置大于设备宽度,会显示横向滚动条,一般移动端,会设置width = device-width
,这样页面就不会出现横向滚动条了。 - initial-scale
- maximum-scale:最大缩放值。
- minimum-scale:最小缩放值。
- user-scalable:是否允许用户对页面进行缩放。
移动端常用单位
- em: 相对长度单位,相对于父元素的字体大小,根据父元素的大小变化而变化。
- rem: 相对长度单位,相对于根元素 html 元素 font-size 的倍数,不会受父元素影响。
- vw: 相对于视口的宽度(viewport 的 width 值), 1vw 就是视口宽度的百分之一。
- vh: 相对于视口的高度,1vh 就是视口高度的百分之一。