douli6605
2015-02-18 04:52
采纳率: 100%
浏览 47
已采纳

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

I don't really know if I need to do this, but I want to.

I've just been using dimensions like font-size: 100%; or font-size: 300%; depending on what looked good but I believe it is half-ass, like I should know exactly how it will look / should look depending on the browser window.

I was going to visually get an idea of how pixels looked, I mean right now I have been using percent divs, my specific div elements are roughly 288 pixels wide with varying heights depending on how many characters there are eg. lines which I will also limit, putting an ellipsis at the end after a certain number of characters but I want to do that according to the scale.

I was trying to use $window.height(); and $window.width; in conjunction with some php code I picked up that would send this to a file and then from here I would break this up, apply percentages and then declare the font-size in the css using php echo but I don't know if that works, so far from my attempt it doesn't... instead of getting window.height as 772, I get 35 but the width is the same. I'm just wondering if this is the wrong way to go about this.

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

Anyway, this idea isn't completely my plan, it's something I'm thinking of doing but I'm asking if I should even waste my time using this which is a bad idea. I don't know how font-size is measured, diagonally or height or width?

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongwei6700 2015-02-18 05:23
    已采纳

    As Mhammad said, mediaquery will work

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

    Or for a smoother transition:

    $( 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/

    评论
    解决 无用
    打赏 举报
  • 查看更多回答(1条)

相关推荐 更多相似问题