[前端]Web前端-移动端开发知识点及常用适配方案

一、前端开发常用单位

1.像素(Pixel)

在前端开发中视口的水平方向和垂直方向是由很多小方格组成的,一个小方格就是一个像素,
不会随着视口大小的变化而变化,像素是一个固定的单位(绝对单位);

2.百分比

百分比是前端开发中的一个动态(相对)单位,永远都是以当前元素的父元素作为参考进行计算 子元素高宽度都是参考父元素高宽计算的
子元素padding/margin无论是水平还是垂直方向都是参考父元素宽度计算的
不能用百分比设置border

3.em

em是前端开发中的一个动态单位,是一个相对于元素字体大小的单位. 例如:font-size:12px; 那么1em=12px
当前元素设置了字体大小,那么就相对于当前元素的字体大小 当前元素没有设置字体大小,那么就相对于第一个设置字体大小的祖先元素的字体大小
如果当前元素和所有祖先元素都没有设置大小,那么就相当于浏览器默认的字体大小(1em=16px)

4.rem

rem就是root em,和em一样是前端开发中的一个动态单位,rem与em的区别在于rem是一个相对于根元素字体大小的单位,例如根元素(html)
font-size:12px;那么1rem=12px 除了根元素以外,其它祖先元素的字体大小不会影响rem大小
如果根元素没有设置字体大小,那么1rem=16px;

5.vw(Viewport Width)和vh(Viewport Height)

vw和vh是一个前端开发中的动态单位,是一个相对于网页视口的单位 系统会将视口的宽度和高度分为100份,1vw就占视口宽度的百分之一
vw、vh和百分比不同的是,百分比永远都是以父元素作为参考,vw和vh永远都以视口作为参考
vmin:vw和vh中较小那个

vmax:vw和vh中较大那个 使用场景:保证移动开发中屏幕旋转后尺寸不变

---

二、视口

视口简单理解就是可视区域大小 在PC端,视口大小就是浏览器窗口可视区域大小
在移动端,视口大小并不等于窗口大小,移动端视口宽度被人为定义成了980

为什么是980?
因为过去网页的版心都是980
乔布斯为了能够让网页在移动端完美的显示,所以将ios手机视口大小定义为980
后来谷歌也将Android手机定义成了980

移动端自动将视口宽度设置为980带来的问题
虽然移动端自动将视口宽度设置为980之后让我们可以完美地看到整个网页
但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
所以为了能够在较小范围内看到视口中所有内容,那么就必须将内容缩小

如何保证在移动端不自动缩放网页的尺寸

通过meta设置的窗口大小 width=device-width
设置视口宽度等于设备的宽度 initial-scale=1.0 初始缩放比例,1不缩放 maximum-scale:允许用户缩放到最大比例
minimum-scale:允许用户缩放到的最小比例 user-scalable:用户是否可以手动缩放比例

---

三、设备像素和CSS像素

1.什么是设备像素和CSS像素?

1.1设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变
1.2CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素
例如: iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320480 / 设备像素320480
iPhone4/4S 3.5英寸/ 逻辑像素320480 / 设备像素640960
也就是说CSS像素和设备像素在有的时候是不一样的

什么时候不一样?为什么不一样?

在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素, 所以我们无需关心PC端的CSS像素和设备像素

在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素, 但是后来一个改变世界的男人(乔布斯)改变了这一切~ 从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。 iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍
这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素
而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素
所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些

2.如何解决设备像素和CSS像素不一样的问题?

    如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响
    如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可
    但是有时候设备像素可能是CSS像素的3倍/4倍