Adjust font size dynamically based on screen resolution without the need for @media queries

This code is functioning correctly.

<style>
h1{ font-size:8.5vw;}
</style>
<h1>Heading</h1>

However, this code is not working as expected.

<style>
h1{ font-size:8.5px;}
</style>
<h1>Heading</h1>

Inquiry: I am aiming to adjust the font size based on screen resolution similar to this example: http://css-tricks.com/examples/ViewportTypography/ -> (try minimizing screen resolution using mouse). When I specify font size in vw like font-size:7.5vw; it works properly. However, when I use pixel values such as font-size:40px;, it does not work as intended.

htmlcssfontsresizefont-size

Answer №1

An effective technique involves using JavaScript to detect the window's resolution and adjust the font size property for specific elements:

<script language="javascript">
    function resizeFontAutomatically()
    {
        var fontSize = calculateFontSize(window.innerWidth, window.innerHeight);
        document.getElementById('my_container').style.fontSize = fontSize + 'px';
    }
    window.onresize = resizeFontAutomatically;
    resizeFontAutomatically();
</script>

Instead of calculateFontSize, a custom function must be created to determine the font size in pixels based on the window size.

For an alternative approach using jQuery:

<script language="javascript">
    $( document ).ready(function() {
        if ($(window).width() > THRESHOLD_VALUE) {
            $('*').removeClass('small-font').addClass('big-font');
        } else {
            $('*').removeClass('big-font').addClass('small-font');
        }
    });
</script>

In this scenario, classes are assigned to HTML elements depending on whether the window width surpasses a specified threshold value. Definitions for the small-font and big-font classes may resemble:

.small-font {font-size: 10px !important}
.big-font   {font-size: 14px !important}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a gallery using Bootstrap 4?

I'm currently working on a project for my homework that involves replicating a car brand page, but I've hit a roadblock at this particular section. https://i.stack.imgur.com/0Zfr5.jpg My goal is to recreate the gallery using a .container with n ...

cssbootstrap-4html

Updating Button Text Upon Click

I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, ...

javascriptjqueryhtmlcss

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide on freezing a Header and Columns in an HTML table with the help of Jquery

I am attempting to adjust the header and columns, as well as change their background color in a Table using JQuery. I have generated the table in JQuery from some JSON data. I have experimented with the 'translate()' function to lock them into p ...

jquerycssjsonhtml-table

Is the content within the h3 tag invisible on Internet Explorer 8?

The text within the h3 tag displays correctly in Firefox and Chrome, but is not visible in IE8. I'm unsure of what the issue might be. Here is the HTML code: HTML: <div id="right"> <h3> profile <div id='upload' cla ...

htmlcssinternet-explorer-8

Is there a way to organize an array of elements into three columns using PHP?

My array of menu items is being displayed on the screen in 3 columns, but I want them to appear differently without altering the HTML structure. Currently, they are listed like this: 1 2 3 4 5 6 7 8 9 I would like them to display as follows: 1 4 7 ...

phphtmlcssarraysmatrix

Watch videos on your browser without any buffering or loading time using HTML

I am inquiring about how to start a video immediately on an HTML5 player, regardless of size, without waiting for it to fully download before playing. I have spent 3 days searching on Google but haven't found a solution yet. I hope someone can assis ...

htmlvideohttp-headersmp4

Is it possible for a dropdown to span 100% of the width

http://jsfiddle.net/gL1xynzr/ Is there a way to style a dropdown menu with the following properties: width: 100%; max-width: 440px; I am planning to include 4 of these dropdowns in one CSS table row to ensure they fit horizontally on mobile phone portra ...

csshtmlsemantic-ui

What is the reason behind the ajax call executing only once?

I have a HTML code with an AJAX function that is supposed to run every 5 seconds to check if a task is completed. However, it seems like the function is only being called once. Can someone help me figure out what's wrong? <script> / ...

javascripthtmlajax

When you hover over one box, watch as another magically vanishes

How can I make one div disappear by hovering over another? When I use the code .icon:hover + .info { display:none), it just displays that div underneath instead of making it disappear. I'm not sure if the placement of the divs in the HTML is affectin ...

htmlcss

Troubleshooting fixed footer printing on HTML pages in Firefox and Chrome

Hey everyone, can someone help me out with CSS? I'm trying to create a printed HTML page with a header and footer. The footer needs to stay at the bottom of the page and if there's a second page, it should also appear at the bottom. I have a demo ...

htmlfirefoxgoogle-chromepositioning

The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div. Here is the code snippet: <div class="form-group col-xs-12"> <fieldset class="field_set col-xs-12"> <legend style="font-weight:bold;font-size:20px"> ...

htmlcssangularjs

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...

cssreactjsmaterial-uiinline-styles

Function cannot be triggered by pressing the ENTER key

I'm struggling to pass values to my function and make it run when I press the ENTER KEY in PHP The function I'm dealing with is called update() Below is the PHP code snippet: echo '<input type="text" size="23" id= n'.$row["Cont ...

javaphpjavascripthtmlajax

Utilize the :not() and :hover selectors in Less when styling with CSS

Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class. I' ...

cssless

Is there a way to enhance the visibility of numbers in this HTML/JavaScript list to show more than just two digits

This piece of code is embedded in an HTML file and functions correctly, however, when applied to a numbered list, it displays numbers from "00" to "99" repeatedly instead of continuing indefinitely until the end of the list: function search_animal() { ...

javascripthtml

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...

javascriptandroidhtmlangularevents

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

javascriptphpjqueryhtml

Simple code styling tool

Seeking guidance to create a basic syntax highlighter using JavaScript or ClojureScript. While aware of existing projects like Codemirror and rainbow.js, I'm interested in understanding how they are constructed and looking for a simple example. Do th ...

javascriptcsssyntax-highlightingcodemirrorclojurescript

Avoiding the parsing of JSON strings in JavaScript

var data = Sheet : [ {"Cell_Address":"A1","Cell_Type":"1","Cell_Value":"Name"}, {"Cell_Address":"B1","Cell_Type":"1","Cell_Value":"Phone no."}, {"Cell_Address":"C1","Cell_Type":"1","Cell_Value":"Currency"}, {"Cell_Address":"D1","Cell_Type":"1","Cell_Value ...

javascripthtmljson