CSS变换比例属性

Question

我有一个很大的问题。我尝试调整页面上的所有字体。下面这段代码在EDGE /铬工作正常，但不是在FF：/我不知道什么问题与代码...

$('#zoom_in').click(function() { 
    $('body').css({ 
     '-moz-transform': 'scale(1.5, 1.5)', /* Moz-browsers */ 
     'zoom': 1.5, /* Other non-webkit browsers */ 
     'zoom': '150%' /* Webkit browsers */ 
    }); 
}); 

$('#zoom_reset').click(function() { 
    $('body').css({ 
     '-moz-transform': 'scale(1.0, 1.0)', /* Moz-browsers */ 
     'zoom': 1.0, /* Other non-webkit browsers */ 
     'zoom': '100%' /* Webkit browsers */ 
    }); 
}); 

提前感谢！

Answer 1

$('#zoom_in').click(function() { 
 
    $('body').css({ 
 
     'font-size' : '150%', 
 
     'zoom': 1.5, /* Other non-webkit browsers */ 
 
     'zoom': '150%' /* Webkit browsers */ 
 
    }); 
 
}); 
 

 
$('#zoom_reset').click(function() { 
 
    $('body').css({ 
 
     'font-size' : '100%', 
 
     'zoom': 1.0, /* Other non-webkit browsers */ 
 
     'zoom': '100%' /* Webkit browsers */ 
 
    }); 
 
});

body{ 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    transition: all 1s ease; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    font-size:100%; 
 
} 
 

 
button{ 
 
padding:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button id="zoom_in">Zoom In</button> 
 
<button id="zoom_reset">Zoom Reset</button> 
 

 
<p> 
 
    Some Text 
 
</p>

它工作正常，在我的Mozilla浏览器。 请检查此代码。 希望这有助于。