使用javascript和php根据视口尺寸设置字体大小
[英]using javascript and php to set font sizes based on viewport dimensions
问题描述
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%; 我刚刚使用像font-size: 100%;这样font-size: 100%; or font-size: 300%; 或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. 我打算在视觉上了解像素的外观，我的意思是现在我一直在使用百分比div，我的特定div元素大约是288像素宽，具有不同的高度，具体取决于例如多少个字符。 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(); 我试图使用$window.height(); and $window.width; 和$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. 结合我收到的一些PHP代码，将其发送到文件，然后从这里我打破这个，应用百分比，然后使用PHP回声声明css中的字体大小但我不知道是否有效，从我的尝试到目前为止它没有...而不是得到window.height为772，我得到35但宽度是相同的。 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 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 个解决方案
解决方案1
0 2015-02-18 04:56:22
为什么不使用CSS媒体查询而不是在解析页面并发送回客户端的服务器上执行它而不是您认为这是服务器上的过载？
解决方案2
0 已采纳 2015-02-18 05:23:09
As Mhammad said, mediaquery will work 正如Mhammad所说，mediaquery将起作用
@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/ https://jsfiddle.net/w2onp4me/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.