Should I use pure CSS or jQuery plugin for responsive typography

HTML & CSS
, , , ,
1

I was thinking media queries, but it also wasn’t suiting what I exactly want. Media queries great for detecting what device being used and all, but not how I want it to be. I’ve done some research, but couldn’t find exactly what I wanted. So which the ways should I use?

2

How do you set up your page for responsive design?

Let’s take Foundation, for example, they base their 3 different screen renderings based off checking the screen width (e.g. at 40.43em or something, medium screen appears)…if you also set your font size to follow that…e.g. 1em font size, that will also be resized for different screen sizes…

I’m bad at explaining but does that make sense? As long as you aren’t setting a fixed size font like 15px…then it should update for different screen sizes…

3

Like Ryan said, we need some more information. How is it not working how you want it to be? Do you have some screenshots and sample code to show us? I’ve found that you can do most responsive work in css and not rely on javascript unless you absolutely HAVE to.

4

Not sure what you mean by media-queries not working. They are not just for detecting device type, but also great for checking screen width. Look at the following and see if this is what you want to do:

<style type="text/css">
    @media screen and (max-width:3000px) {
    /* for screen widths above 900px, show the font at 2em height  */
        h1 { font-size: 2em; }
}
    @media screen and (max-width:900px) {
    /* for screen widths above 640px, show the font at 1.6em height */
        h1 { font-size: 1.6em; }
}
    @media screen and (max-width:640px) {
    /* for screen widths up to 640px, show the font at 1.3em height */
         h1 { font-size: 1.3em; }
}
</style>
1 Like