We Keep Coding

Using length and width ratio for Responsive CSS

Question
Can I use length and width ratio to change CSS file? If length is greater than width then device must be cellphone or tablet and ratio must be grater than one. And if ratio is less than one that means device must be desktop or phone is switched to landscape mode!?
And if it is so, then I can easily use JavaScript to change CSS file for different platforms! I'm I right or not?

When building websites with the mobile-first approach, you can change elements according to the screen width of the device. To overwrite properties for all screens bigger than e.g. 649px:
#media only screen and (min-width: 650px) {
h1 {
font-size: 3em;
margin: 1em 0 1em 0;
}
}

You easily use CSS media queries for that
Checkout:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
So you will be able to set query for landscape, portrait, print, screen and so on.
Or specify different css style using Javascript at each query
Checkout :
https://www.w3schools.com/jsref/met_win_matchmedia.asp

Stop being responsive at a certain width

I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)

set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.

You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

how to change the font-size proportionally to the change size of the window in CSS3 or javascript

I do some web app and i have some problem with font-size.
How to change the font-size proportionally to the change size of the window in CSS3 or javascript?

The ideal way to do this is using the vw unit, which is defined as 1/100th of the viewport width (hence the name). So, for instance, if you wanted your text to be 4.5% of the browser's width at all times, you could use the size:
font-size: 4.5vw;
… and theoretically, that should work. Unfortunately, you'll find, it doesn't quite work as expected: there's a bug in WebKit browsers (at least) where the value for font size isn't live-updating (although it is for all other dimensions). You need to trigger a repaint in order for the font size to change, which can be done by updating the z-index property from JavaScript:
window.addEventListener('resize', function(){
document.getElementById('myEl').style.zIndex = '1';
}, false);
This may create a little bit of choppiness, but it means you don't have to calculate any actual dimensions in JavaScript, and you don't need to used "stepped" sizes like with media queries.

The ideal way to do so is to combine between the VW font-size and #media queries. Reasons are:
1) em for itself won't rescale by window size
2) vm for itself will be too small for resolutions / screens lower than 800px.
So the right way to achieve this is:
Define a class - prop-text with VM=1.0 for your desired screen width
Add media queries to fit the font-size with your desired lower resolution grids.
For my responsive grid (which sets a 1/2 column to take 100% width below 768px width) it looks like that:
<style>
.prop-text{font-size:1.0vw}
#media (max-width : 768px) {
.prop-text{font-size:2.0vw}
}
/*other media queries here - fit font size to smartphone resolutions */
</style>
<div class="prop-text">your text is here</div>

Set your base font size (the one you define for your body element in css) in px then everywhere in the rest of your page set font sizes relative to that one using emunit, then you can use media queries to change the font sizes of all your pages by just changing your base font, something like this:
body {
font-size: 15px;
}
#media (max-width: 1000px) {
body { font-size: 1.3em; }
}
#media (max-width: 500px) {
body { font-size: 1.1; }
}

You have 3 ways to do it:
Using http://fittextjs.com/, but pages can start to be slower
Using media queries
Using ems
Now, it depends on what you want to be your final result.
I'd go to option no 3.

I think the best way might be vh, beeing that font-size changes the height of the text. Using vh means that the text will always foolow the size of the page, even if the user resizes the page or the screen is small.

jQuery - If screen is less than specified width (responsive)

How can I make an alert popup if the width of the page is less than 1200px, and made responsive?
Thanks!

You can use something like the breakpoints module. Then you setup a breakpoint to trigger at 1200px and show a dialog and either add a css class that changes the layout, or use straight javascript to make the changes.
breakpoints(1200, function(oldPoint, newPoint) {
alert('The screen width just changed');
});
if you just wanted native jQuery:
$(window).resize(function() {
var width = $(window).width();
if (width < 1200){
alert('Your screen is too small');
}
});
For completeness, heres the CSS media query (still doesn't take care of the alert, but can help with making the website "responsive").
/* some normal style */
.myclass {
font-size: 22pt;
}
/* alter the style when the screen's smaller */
#media screen and (max-width: 1200px) {
.myclass {
font-size: 18pt;
}
}

For future Googlers, a 2019 solution is to use JavaScript's window​.match​Media(). It is supported in all major browsers and IE 10 onwards.
You can use it like this:
if (window.matchMedia('(max-width: 1200px)').matches) {
// functionality for screens smaller than 1200px
}
To make this responsive, you just need to wrap it in a resize function:
$(window).resize(function() {
if (window.matchMedia('(max-width: 1200px)').matches) {
// functionality for screens smaller than 1200px
}
});
This is arguably the most easiest way to check a screen size and it doesn't bloat the code.
Check the Mozilla docs about match​Media to learn more and this one for more info on Testing media queries programmatically.

How can I change a CSS attribute by Javascript when a certain minimum screen resolution size is detected

I have this code:
function AUTADIV () {
var BRW = window.outerWidth;
x = (BRW/1280) * 20
document.getElementsByTagName("a").style.fontSize = x
}
and the tag <a> is already under this class in a .css file:
a {
position:relative;
z-index:1;
color:White;
background-color: transparent;
font-size:20pt;
text-decoration: none;
text-shadow: blue 0em 0em 0.4em
}
When someone with a larger screen sees my site, the background does fill it all, but the font is too small. Is there any way to make it automatically resize? If not, how can I change font-size:20pt by JavaScript? My code only works if the font-size style is inline, and I need it in the CSS script.
I have found that the code I need activates with the onResize event.

If it needs to be in the CSS then it might be difficult to do. If however, it's able to be changed dynamically with JS then you can accomplish this with a simple test like:
(I'm using jquery)
$.getDocHeight = function(){
return Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
$('a').style('font-size','40pt');
}
This can be done in regular js as well. It's hard to determine the width on all different browsers, thats why I included the function. But once you have the width, you just need to do a simple check and you can bump up the font-size style for your anchor tags. I suggest having static sizes so that the font is more predictable and doesn't scale with your page size.
This is a best practice when considering different types of users (like mobile users where you definitely do not want the font to be so small that all of it fits on one page).
Src for code: http://james.padolsey.com/javascript/get-document-height-cross-browser/

You may modify the rules by accessing the CSSRule-Object.
Details:
IE<9 : http://help.dottoro.com/ljcufoej.php
Others: http://help.dottoro.com/ljdxvksd.php

You might get better results using a media query:
#media all and (max-width: 1280px) {
a{font-size:12pt;}
}
You can repeat this for increasingly smaller sizes. It won't smoothly transition, but it doesn't require JavaScript (and besides so much changes when you resize a window that a jump in text size probably won't be noticed).