解决PC端屏幕缩放比例对页面布局的影响
现在很多笔记本电脑都推荐将缩放设置为125%，等比例放大显示。
这对我们前端的页面的布局会产生一些影响
-
首先，单独的响应式布局hold不住这个问题，因为出问题的是
device-pixel-ratio。 -
问题现象是高分屏下整好的东西，在普分屏下会放大；而普分屏下整好的东西，在高分屏上会缩小。
-
重现这个问题不需要高分屏，直接用
Ctrl + +或者Ctrl + -出来的效果是跟高分屏一致的（所以搞定这个问题之后，也可以同时预防用户误触网页缩放）。另外恢复是Ctrl+Num0 -
解决的关键就是你得在
媒体适配里写device-pixel-ratio单独适配像素比；另外，需要把绝大多数组件由px单位转换为rem单位，因为需要在前边提到的device-pixel-ratio里调节:root的font-size，以达到动态缩放的目的
px、rpx、em、rem、vw、vh等像素单位的区别
-
px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。
rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。 -
em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-size属性那么就会按照自身来计算，都没有设置的话，就会按照当前所有浏览器或者设备的默认文字大小来计算调整。一般来说浏览器的默认字体大小为16px，一个完整的页面内，可能每个模块的 em默认值都不想同。
-
rem：css3中推出的新单位。相对于根元素（html）设置的 font-size属性进行调整，而不会像 em那样依赖于父元素的字体大小而造成页面文字大小不相同的混乱局面。
-
vw：同样是css3中推出的新单位，是 viewpoint width的缩写，意为视窗宽度。视窗宽度1vw等于是窗宽度的1%。也就是说，如果当前开发浏览器或者设备的宽度为1280px，那么1vw就等于12.8px。在开发设计的过程中，100vw才能真正占据当前屏幕宽度的100%。
-
vh：和vw同理，是css3中推出的新单位，是 viewpoint height的缩写，意为视窗高度。视窗高度1vh等于是窗高度的1%。计算及使用都与vw相同
解决方案一
@media all
and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
(-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
(min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
:root {
font-size: 14px;
}
}
@media all
and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
(-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
(min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
:root {
font-size: 13px;
}
}
@media all
and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
(-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
(min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
:root {
font-size: 12px;
}
}
@media all
and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
(-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
(min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
:root {
font-size: 10px;
}
}
@media all
and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
(-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
(min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
:root {
font-size: 9px;
}
}
@media all
and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
(-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
(min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
:root {
font-size: 8px;
}
}
解决方案二
/***js代码***/
function handleScreen(){
const m = detectZoom();
document.body.style.zoom = 100/Number(m);
}
function detectZoom () {
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
}
function getWindowHeight() {
var zoom = document.body.style.zoom;
var height = $(window).height();
if (zoom) {
return height / zoom;
}
return height;
}
function getWindowWidth() {
var zoom = document.body.style.zoom;
var width = $(window).width();
if (zoom) {
return width / zoom;
}
return width;
}
window.onresize = function(){
handleScreen()
}
/***或html的body加上onresize***/
<body onresize="handleScreen();">
