做过移动端的小伙伴们都知道,移动端的适配是一个比较难解决的事。首先我们先来了解下移动端的物理像素、逻辑像素、像素比的概念。
1.物理像素:通常是指浏览器的分辨率,也可理解为屏幕的宽度*高度。开发PC端的话,css中的1px就等于一个物理像素;
2.逻辑像素:这个概念主要针对移动端,移动端开发的话,1px就是一个逻辑像素;
3.像素比(dpr
):物理像素/逻辑像素。在移动端可以通过window.devicePixelRatio来获取设备的像素比,这个值针对设备来说是固定的,同一个品牌的同一个机型也是相等的。
因为电子产品显示的是物理像素,在PC端1px都是1px。但是在移动端,物理像素=dpr*逻辑像素(css像素)
,因为像素比这个因子的不同,会产生1px的像素问题,也就是说你给某个元素加1px的border,在不同的设备的粗细是不一样的,像素越大会越明显。那么我们怎么来解决这个问题呢?
思路:
①我们都知道有个<meta name="viewport" content="width=device-width,initial-scale=1.0>
来控制字体的适配,其中initial-scale是指缩放的比例,在PC端是固定的都是1.0;但是在移动端,我们可以通过window.devicePixelRatio
来获取设备的像素比后,设置缩放initial-scale=1/dpr
,然后动态添加这个属性给html,某宝移动端适配就是这样做的。
②rem:基于根元素(html)的一种字体,假设你的根元素设置了1rem=16px;那么其他地方用这个都会基于这个比例来转换;还有一种(em)这个是基于父级元素;
③通常基于webpack开发的话,如果我们不想自己根据设计稿来转换的话,可以通过px2rem 这个插件来协助你进行转换,在移动端你只需根据UI图的设计来写px即可,
假设你的UI图是依据iPhone 6 750px来设计的;
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
④但是如果你的移动端采用了UI库,因为UI库是用px写的,通常加了动态加了<meta name="viewport" >
后,在dpr
>1的设备上会变小,网上很多开发者说使用px2rem-exclude
后忽略ui库的rem转换,其实他们没搞懂变小是什么原因造成的,而用这个插件是丝毫没有任何作用的。唯一的方法就是改写你的UI库的字体大写。