移动端开发

AncilunKiang

于 2023-05-23 15:58:43 发布

阅读量269

点赞数 2

分类专栏：前端开发学习笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_43941037/article/details/130829101

版权

21 篇文章 0 订阅

订阅专栏

移动端

区别于传统的页面开发，移动端开发是指利用移动设备的特性以及CSS3提供的各种相对单位来实现移动端页面布局开发。移动设备是指便携的移动电子设备。包括手机、平板、小屏幕电脑等。

一是布局不匹配：pc端一般屏幕较大，可以显示更多的东西，而移动设备屏幕空间有限，只能显示部分内容。二是代码量太大，针对pc、移动端会写不同版本的css。

英寸是一个长度单位，1英寸约等于2.54厘米。手机中的英寸是指手机屏幕对角线的长度为多少英寸，比如iPhone6的屏幕尺寸是4.7英寸，指iPhone6的屏幕对角线尺寸为4.7*2.54厘米。

是指屏幕上最小的一个方块，每个方块可以存放一种颜色。若干个像素的结合就可以形成图像。平时所说的分辨率就是指屏幕上有多少个小方块(像素)。

比如说iPhone6的物理分辨率是750 x 1334.指的是iPhone6屏幕水平方向上有750个发光点，每个发光点可以作为一个像素。垂直上有1334个发光点(小方块)。设备物理像素是固定的，只有这么多像素。

独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。每个手机的设备独立像素是不一样的，绝大多数手机的独立宽度为：360、375、390、411、414。设备独立像素就是移动端页面所参考的100%宽度。

手机的独立像素和物理分辨率的比值。每个手机的dpi是固定的。比如iPhone 12 Pro Max的独立像素是428*926，手机物理分辨率是 1284 x 2778，dpi就是3.0。

因为手机一般的屏幕较小，分辨率不同。为了正常显示所有的页面，包括pc端，所以移动端针对浏览器页面有个默认的页面宽度。大多数的手机浏览器页面默认宽度为980px，有的是1024px。我们称默认的移动端浏览器页面展示模式为布局视口。

布局视口是为了正常显示pc端页面而做的调整，但对于屏幕本身是无法以屏幕本身宽度来作为页面布局。而视觉视口是指以当前屏幕的宽度作为页面的布局方式。

不同的dpi会导致相同px的页面在不同的手机下会有空隙或者滚动条等。

无论是什么品牌手机，或哪种分辨率，应当同样宽度的页面在不同的手机上都会呈现一样的效果，我们成为理想视口。每个手机的理想视口是以自己的设备独立像素作为自己页面的100%宽度。1csspx 在每个手机上的效果是一样的。

em：1em相当于父标签的font-size大小。比如父标签的font-size为14px,那么1em等于14px，2em=28px。
- 父标签没有font-size则继续往上找font-size。如果祖先标签都没有设置font-size，会参考浏览器的font-size，大多数默认16px。
rem：rem是只想对于<html>标签的font-size，不会被父标签的font-size所影响。即如果<html>的font-size为30px，那么页面上的所有后代标签设置1rem==30px。