Question

我真的不知道我是否需要这样做，但我想。

我一直在使用font-size: 100%;或font-size: 300%;这样的维度，具体取决于看起来不错的东西，但我相信它是半屁股，就像我应该确切地知道它看起来/应该看起来取决于浏览器窗口。

我打算在视觉上了解像素看起来如何，我的意思是现在我一直在使用百分比div，我的特定div元素大约是288像素宽，具有不同的高度，具体取决于例如多少个字符。我也将限制的行，在一定数量的字符后面放一个省略号，但我想根据比例做到这一点。

我试图将$window.height();和$window.width;与我收到的一些PHP代码结合使用，将其发送到文件然后从这里我将打破这个，应用百分比然后声明使用php echo的css中的字体大小但是我不知道是否有效，到目前为止我的尝试还没有...而不是得到window.height为772，我得到35但宽度是相同的。我只是想知道这是否是错误的方法。

<?php 
require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR.'some_script.php');
?>
<script>
alert($(window).height());
alert($(window).width());
$(function() {
    $.post('some_script.php', { width: window.height(), height: window.width() }, function(json) {
        if(json.outcome == 'success') {
            // do something with the knowledge possibly?
        } else {
            alert('Unable to let PHP know what the screen resolution is!');
        }
    },'json');
});
</script>

<head>
<style>
body {
background-color: #008000;
}
.mini-container {
font-size: <?php echo $modified_value; ?>;
}
</style>
</head>
<body>
<div class="mini-container">
something something dark numbers
</div>
</body>

some_script.php

<?php
if(isset($_POST['width']) && isset($_POST['height'])) {
    $_SESSION['screen_width'] = $_POST['width'];
    $_SESSION['screen_height'] = $_POST['height'];
    $modified_value = $_SESSION['screen_height']*0.2;
    echo json_encode(array('outcome'=>'success'));
} else {
    echo json_encode(array('outcome'=>'error','error'=>"Couldn't save dimension info"));
}
?>

无论如何，这个想法并不完全是我的计划，这是我正在考虑的事情，但我问我是否应该浪费时间使用这个，这是一个坏主意。我不知道字体大小是如何测量的，对角线或高度或宽度？

Answer 1

为什么不使用CSS媒体查询而不是在解析页面并发送回客户端的服务器上执行此操作而不是您认为这是服务器上的过载？

Answer 2

正如Mhammad所说，mediaquery将起作用

@media (max-width: 600px) {
  #container {
    font-size:25pt;
  }
}

或者为了更顺畅的过渡：

$( window ).resize(function() {
$( "#container" ).css("font-size",function() {
        var value = $( "#container" ).css("width");
        console.log(parseInt(value)/24 + "pt");
        return parseInt(value)/24 + "pt";
    }) ;
});

https://jsfiddle.net/w2onp4me/

使用javascript和php根据视口尺寸设置字体大小

2 个答案: