Responsive Font Sizing - javascript

I been trying to think of a way to change the font size as the parent element sizes changes. Most likely this would be due by the browser size being changed. Such as when I make my Chrome smaller the font will become smaller as well as well as vice versa.
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 was thinking the answer lies in some kind of JavaScript, but if there was an answer that uses CSS I would prefer that. I've done some research, but couldn't find exactly what I wanted.

You can use mediaqueries.
i use this for my test :
#media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
#media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
#media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
#media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
#media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
#media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
#media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
#media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
#media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
Size chosen might not be the best, the transition is to avoid jumping size to size while resizing window.
Have fun !

All plugins are crap. Just try using simple css for it.
Example:
#media screen and (min-width: 1200px){
font-size:80%;
}
#media screen and (max-width: 768px){
font-size:90%;
}
#media screen and (max-width: 320px){
font-size:80%;
}
They will be flexible on each and every viewport. Hope this helps you.

The fit text plugin is really interesting for large fonts. If you are thinking of text and paragraph fonts, it's maybe not the best solution though.
The media query solution is the most common approach, though there is also a technique called responsive typography, where the font sizes change not in predetermined steps, but progressively as the wiewport changes.
Essentially you size the fonts as a percentage of their parent element, for example a percentage of the body width. The best description I know of the technique is http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2
Good luck!

You can use CSS3 vh, vw,vmin and vmax new values for responsive font.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
More details: https://css-tricks.com/viewport-sized-typography/

http://fittextjs.com/ here is a nice plugin that does exactly that

Related

Page visibility when resizing

I am creating a webpage and when I resize the window it kind of starts to mess up. Text changes its position and so on. How is it possible to keep it beautiful even after resizing the window? Maybe there are some video courses? Thanks in advance!!
lots of video courses are available. You can search by "Responsive layouts" keyword. But you can get rid of easily. All you need is standard media queries. Put this media queries in the end of your .css file and start styling according to your screen size. (e.g for mobile size use (max-width : 767px) etc..)
#media only screen and (max-width : 1200px) {
}
#media only screen and (max-width : 979px) {
}
#media only screen and (max-width : 767px) {
}
#media only screen and (max-width : 480px) {
}
#media only screen and (max-width : 320px) {
}
You are looking for css media-queries it is a broad subject. So I can not point to exact destination to go. But the are tons of material on youtube pertaining those subject. You could also tried https://scrimba.com/ for interactive tutorial.
CSS media queries can help. They let you make rules in CSS about how you want different elements on your webpage to display when the screen size changes, or when it is displayed on a smaller or larger screen to begin with. Here is a good introduction: w3schools: CSS Media Queries.
Basically, you set "breakpoints" and the styles you want for those breakpoints:
#media screen and (min-width: 500px) {
body {
margin: 10px;
}
}
More examples: w3schools: CSS Media Queries - Examples

media screen and min-width: 965px and max-width: 965px

#media screen and (min-width: 965px){
//style here
}
#media screen and (max-width: 965px){
//some other style
}
every thing works fine in less than or more than 965px but when the screen on 965px bugs appear
is there is any way to fix that
Switch the order and give yourself 1px of leeway between the 2.
#media screen and (max-width: 964px){
//some style
}
#media screen and (min-width: 965px){
//style here
}
This way, there is no overlap.
Note: It is not recommended to use bot min and max width in screen size queries. If you just use min-width, and list them from smallest to largest, the one below will override the one above it.
Just change the second one to
#media screen and (max-width: 964px){
that way the y will be kept seperated and won't interfere with each other.

How to adjust contents to automatically fit size of the screen?

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?
You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Automatically Resize Images After Certain Width

So I have a webpage with a banner (1024 pixels) and then some pictures in the center region below. I'm looking with CSS (or some other alternative) to start resizing all the images (banner and page icons) downwards automatically if the size of the page in the browser is less than the minimum banner width and if it greater than this minimum size, none of the images are scaled (the banner is on a transparent background so it "resizes fluidly").
This seems like a pretty basic question so I doubt it'll really require all that much but all the other references I saw didn't do it for me (and I am really inept at CSS). Any advice is appreciated and thanks in advance!
Use media queries in your CSS - something like this:
#media screen and (max-width: 400px) {
#container {
width:320px;
}
}
#media screen and (min-width: 401px) and (max-width: 900px) {
#container {
width:700px;
}
}
#media screen and (min-width: 901px) {
#container {
width:900px;
}
}
(You can adjust the numbers/brackets).
Then set your image widths as a percentage of the container.

stopping bootstrap template from shrinking after a certain point

I've been wondering if there is a way to stop bootstrap from shriking after a certain point. I like the way my website looks 700 px width. so is there a way to stop bootstrap from shirking my html after that point?
I think that, as mentioned in question Twitter bootstrap minimum width in responsive layout, you can set min-width CSS property to 700px for any element you don't want to be narrower than 700px.
Say you have a div called "wrapper" that wraps all of your page contents:
<div id="wrapper">
<!-- All contents in here -->
</div>
You can style it like this:
#wrapper {
min-width: 700px;
}
NOTE: If you are using responsive layout, you will also have to comment the styles you want to be disabled in bootstrap-responsive.css file.
So, when using responsive layout, if you want your site to be displayed 700px wide, you will also have to comment the styles under:
#media (min-width: 768px) and (max-width: 979px) {
#media (min-width: 1200px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
And leave the CSS rules (but removing the #media and the brackets) of styles under:
#media (max-width: 767px) {
Hope that helps!

Categories

Resources