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?
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";
}) ;
});
Why don't you use CSS media query instead of doing it on the server parsing the page and sending back to the client don't you think that that is an overload on the server ?