Question

我有一个大问题。我尝试调整页面上的所有字体。下面的代码在EDGE / CHROME中工作正常，但在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

＆＃13;

$('#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 */
    });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

它在我的Mozilla浏览器中运行良好。请检查此代码。希望这会有所帮助。

CSS转换比例属性

1 个答案: