CODEWITHSUNDEEP
javascriptcsshtml
shin1234
shin1234

Reputation: 217

HTML5 fontsize resize on browser size javascript/jquery

Hi I'm trying to resize my fontsize dynamically. base on my browser size.

I already have the following CSS, HTML and I'm trying to add something into my javascript

CSS

#firstPosition
{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    background-color: black;
}

.textSize
{
    font-size: 150%;
    color: black;
}

HTML5

<div id="firstPosition">
    <p class="textSize">Hello</p>
</div>

My Positioning is absolute, so it will keep remaining at the center of my screen even if i do a resize of my browser. but my text does not resize.

Any advice?

thanks.

SOLVED!

used

font-size: 1.2vw; instead

Upvotes: 1

Views: 76

Answers (3)

Michael Eugene Yuen
Michael Eugene Yuen

Reputation: 2528

Resize according to the screen width (example)

#firstPosition
{
    position: absolute;
    width: 50%; /** resize **/
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: black;
}

.textSize
{
    font-size: 3vw; /** resize **/
    color: #FFF;
    text-align: center;
}
<div id="firstPosition">
    <p class="textSize">Hello</p>
</div>

ALTERNATIVE JQUERY SOLUTION

$( window ).resize(function() {
var ratio = $('#firstPosition').width() / 400;
$('.textSize').css({
  '-webkit-transform' : 'scale(' + ratio + ')',
  '-moz-transform'    : 'scale(' + ratio + ')',
  '-ms-transform'     : 'scale(' + ratio + ')',
  '-o-transform'      : 'scale(' + ratio + ')',
  'transform'         : 'scale(' + ratio + ')',
  'transform-origin'  : '50% 50%'
});
});
#firstPosition
{
    position: absolute;
    width: 50%;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: black;
}

.textSize {
  text-align: center;
  color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="firstPosition">
    <p class="textSize">Hello</p>
</div>

Upvotes: 1

Koushik Sarkar
Koushik Sarkar

Reputation: 498

Try to add this meta tag in your html head

<head>
<title>Title</title>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
</head>

Upvotes: 1

Azlina T
Azlina T

Reputation: 176

use media queries:

@media screen and (min-width: 640px) { body { font-size:12px; }}

Here, when browser size becomes at least 640 or below, font size will be 12px.

You need to adjust min-width and CSS selector as per your requirement.

Note that you can have multiple media queries for different sizes.

Upvotes: 0

Related Questions