rem适配终极方案
视窗 viewport
简单的理解,viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。
移动端的viewport太窄,为了能更好为CSS布局服务,所以提供了两个viewport:虚拟的visualviewport(视觉视窗)和layoutviewport(布局视窗)。
引用块内容
CSS像素
CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。
屏幕密度
屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。
设备像素比(device pixel ratio)
设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:
设备像素比 = 物理像素 / 设备独立像素
- 1
在JavaScript中,可以通过window.devicePixelRatio
获取到当前设备的dpr。而在CSS中,可以通过-webkit-device-pixel-ratio
,-webkit-min-device-pixel-ratio
和 -webkit-max-device-pixel-ratio
进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
众所周知,iPhone6的设备宽度和高度为375pt * 667pt
,可以理解为设备的独立像素;而其dpr为2
,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt
。
在不同的屏幕上,CSS像素所呈现的物理尺寸是一致的,而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1
个CSS像素对应1
个物理像素,而在Retina屏幕下,1
个CSS像素对应的却是4
个物理像素。
具体我们无需过于纠结,因为已经有现成的工具可以给我们使用。
我们只需理解,1px的CSS像素,可能对应不同的物理像素。
我们只需要计算
设备像素比 = 物理像素 / 设备独立像素
示例:
假如有一份750设计稿,设备像素比就是:
2=750/375
仅仅这样,有点难懂,我们该如何设置进webpack项目里,并且一份设计稿,就适配所有屏幕呢?
让我们用实例说话,以vue脚手架为例,将以下代码加入webpack的utils.js中
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 5
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
然后修改
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
此时rem转换已经启动,然后我们加入从github搜素的hotcss.js
注意remUnit(rem单元)和remPrecision(rem精度)
好吧……这其实是不用注意的,精度就是小数点后面有几位的意思
设置的时候,只要去hotcss.js中,根据设计稿的大小,修改成320或375
options: {
remUnit: 打开调试窗口,然后看font-size,直接写上来
remPrecision: 5
}