rem适配 下的1物理像素实现
(function(){
//获取设备的像素比
var dpr = window.devicePixelRatio||1;
var styleNode = document.creatElement('style');
// 让布局视口的宽度按像素比的大小先变大或变小;
var w = document.documentElement.clientWidth*dpr/16 ;
styleNode.innerHtml = 'html{fontsize:'+w+'px;}';
document.head.appendChild(styleNode);
var scale = 1/dpr;
var meta = document.querySelector('meta');
//通过initial-scale把整体页面进行缩小或放大;
meta.content='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scable=no';
})()
通过css实现1物理像素
因为设备的像素比的值大多数时2和3,
所以我们可以通过媒体查询的方式分别真的像素比2和像素比3的设备
进行不同的transform样式设置;
<style>
@media only screen and (-webkit-device-pixel-ratio:2) {
#line {
transform: scaleY(.5);
}
}
@media only screen and (-webkit-device-pixel-ratio:3) {
#line {
transform: scaleY(.3333333);
}
}
</style>