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
}