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

报告相同问题?

悬赏问题

  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝