Fatal编程技术网
  • javascript/
  • 使用javascript和php根据视口尺寸设置字体大小

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

javascript php jquery html css

使用javascript和php根据视口尺寸设置字体大小,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我真的不知道我是否需要这样做，但我想这样做 我刚刚使用了像font size:100%这样的维度或字体大小：300%取决于什么看起来很好，但我相信它是半屁股，就像我应该知道它会是什么样子/应该是什么样子取决于浏览器窗口 我想从视觉上了解像素的外观，我的意思是，现在我一直在使用百分比div，我的特定div元素大约是288像素宽，高度根据字符的数量而变化，例如，我也会限制行，在一定数量的字符后面加一个省略号，但我想根据比例来做 我试图使用$window.height（）和$window.width与

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

我刚刚使用了像
font size:100%这样的维度或
字体大小：300%取决于什么看起来很好，但我相信它是半屁股，就像我应该知道它会是什么样子/应该是什么样子取决于浏览器窗口

我想从视觉上了解像素的外观，我的意思是，现在我一直在使用百分比div，我的特定div元素大约是288像素宽，高度根据字符的数量而变化，例如，我也会限制行，在一定数量的字符后面加一个省略号，但我想根据比例来做

我试图使用
$window.height（）
和
$window.width
与我收集的一些php代码一起，将其发送到一个文件，然后从这里我将分解它，应用百分比，然后使用php echo在css中声明字体大小，但我不知道这是否有效，从我的尝试到目前为止，它没有。。。我得到的不是772的window.height，而是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>




警报（$（窗口）.height（））；
警报（$（窗口）.width（））；
$（函数（）{
$.post（'some_script.php'，{width:window.height（），height:window.width（）}，函数（json）{
如果（json.output=='success'）{
//尽可能用知识做点什么？
}否则{
警报（'无法让PHP知道屏幕分辨率是多少！'）；
}
}“json”）；
});
身体{
背景色：#008000；
}
.小型货柜{
字号：；
}
一些黑暗的数字


关于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"));
}
?>



为什么不在服务器上使用CSS媒体查询，而不是解析页面并发送回客户端？你不认为这是服务器上的过载吗？
正如Mhammad所说，媒体查询可以工作


@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";
    }) ;
});



我喜欢第二种选择，我会调查一下，非常感谢muchI在读到关于使用pt的文章时，我认为它不适用于web，这是没有意义的，我是说Microsoft Word使用point。我不知道它是否过载，我必须先让用户知道它是否过载。不过我理解你的说法。我喜欢下面的解决方案，我尝试了一下，缩放窗口，文本似乎缩放得很好。改用这个
$（窗口）。调整大小（function（）{$（“#container”）.css（“font size”，function（）{var value=$（this）.css（“width”）；console.log（parseInt（value）/24+“pt”）；返回parseInt（value）/24+“pt”；}）;