CSS problems

Asked

Viewed 41 times

0

I have the following function Jquery to change the font size during Screen Resizing.

const textPattern = 0.0085;
function resizeFont(widthWindow){
    var calc_text = widthWindow * textPattern;
    $('body').css('font-size', calc_text);
}

The problem that using this function or all the edges increase proportionally and I didn’t want that, I tried to fix it by changing the function this way

var width = $(window).width();    
const textPattern = 0.0085;
function resizeFont(widthWindow){
    var calc_text = widthWindow * textPattern;
    var calc_exception = width * textPattern;
    $('body').css('font-size', calc_text);
    $('input').css('font-size', calc_exception);
}

I tested this function on my login screen where the edges of inputs were increasing but it didn’t work, someone would tell me how to fix it?

  • 2

    How does the screen resize occur? Are you thinking of mobile with horizontal and vertical screen? otherwise you could do this only with CSS...

  • I’m only doing it for WEB anyway, and I’m doing it via Jquery because I wanted to leave all my fonts in the text in a certain size for your element when there would be the resizing, if it does not have this function end up that the fonts burst the size of the elements and end up leaving the TAG

  • You can give an example with a jsFiddle of the problem?

  • Use media queries in CSS, it’s much easier than the way you’re doing it.

  • You could create an example in Jsfiddle, in the site’s own tool, or better describe what problem you are trying to fix?

  • Jonathan I think you may not have understood, my site will not cover mobile devices but only computers from a computer intranet, what I want is to make it adapt to various types of resolution and by what I researched on media queries, its use is more linked to mobile adaptation.

  • 1

    It is not just for mobile @Miguelcarigo, on the contrary, it is much simpler for what you need and serves to handle any resolutions, it is directly connected to mobile because it is widely used for this purpose, but it is not limited to mobile......

  • @Miguelcarigo, I highly advise you to use the CSS Media Query, for the simple fact that it was made for the browser know how to make these layout modifications for different resolutions, independent of the platform. Doing this via Javascript is a bad idea, because you’ll be rewriting something that the browser already knows how to do natively, and depending on the way you do it, you’ll get a performance breakdown, among other possible problems.

  • @Miguelcarigo, here’s a tip: your users will want to access your site via mobile, after all, today 51% of internet access is made via mobile and this number grows every day. http://www.telegraph.co.uk/technology/2016/11/mobile-web-usage-overtakes-desktop-for-first-time/

Show 4 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.