gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:24:44 25 4
gpt4 key购买 nike

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

我一直在使用像 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"));
}
?>

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

最佳答案

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

https://jsfiddle.net/w2onp4me/

关于javascript - 使用javascript和php根据视口(viewport)尺寸设置字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28576223/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com