We Keep Coding

Different CSS sheet depending on screen size, using javascript

I have created 2 different versions of my website, one for laptop screen size and one for mobile screen size (tablet screen size, on the way). So, I was wondering if you could tell me how am I supposed to use javascript (because I have a feeling that it could be done through javascript) in order to have as a main webpage file the one that is supposed to be for laptops and in case the user opens my website through their mobile, the file that will open will be the one for mobile size screens. I hope you get my question.
Thank you very much in advance!
PS: I read something about #media but still trying to figure things out.
PS2: If you need me to post any code, let me know which part you might need and I will gladly post it.

You can use media queries to import different CSS files, depending on screen size.
This will work without javascript and would be the prefered approach in my opinion.
Your site could have the following code in a tag in the header:
/* Everything 1000px and lower */
#import url("./mobile.css") only screen and (max-width: 1000px);
This will load another stylesheet if the media query is satisfied.
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Use media queries in your CSS file:
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Examples and more, here

when it comes to responsive, avoid as much as you can javascript, you can do it with css media queries, you can learn more about it here:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
or you can go for the framework approach, bootstrap for example.

I think if you use bootstrap, you can easily manage you requirement quickly.
Please refer following link to get idea -
https://getbootstrap.com/docs/3.3/css/

You can use media query to handle css on you web page
// For Ipad Portrait and Landscape
#media screen and (min-width: 768px) and (max-width: 1024px) {
}
// For iPhone and smaller devices
#media screen and (max-width: 767px) {
}
also to handle javascript you need to use device width in jquery
if ($(window).width() < 767) {
alert('Less than 767');
}
else {
alert('More than 767');
}

How to edit a HTML theme's mobile version?

I have downloaded a free HTML template from web and i'm trying to edit this HTML theme. In my theme i changed background photo, it's good on my computer and my resolution (1366x768) but on mobile and other resolutions it's not working well. Background image is crushing.
please visit that website with your computer and your mobile phone for understanding clearly. Theme link
and please help me to edit mobile version of this website. I couldn't find anything. Here's the list of my javascript files in theme folder. image of files

What you can use is a media query the syntax of which looks like so:
#media <What to respond to> {
//then place the elements, class and id here
}
The media query can take in width by doing #media (max-width:<insert width here>) or #media(min-width:<insert width here>)
Multiple media queries can be used together like so #media (max-width:100px) and (min-width:50px).
Another class of media queries can be used to specify how behave depending on the type of device, they include but not limited to:
tv
screen
handheld
all
They are used by typing #media <name of device>
An Example with some of they things i have mentioned being used
#media screen and (max-width: 100px) and (min-width: 50px) {
//If the device is a screen, is wider/equal to 50px but smaller
//than or equal to 100 then it will do this
img {
width: 75px;
height: 30px;} }
#media screen and (max-width: 400px) and (min-width: 101px) {
//I'm sure what will happen but i will tell you anyway
//If the device is a screen, is wider than/equal to 101px but
//smaller than/equal 400px
img { //Something
}}
My suggestion is to read up on it take a look here

There are many ways to solve your problem. One way is change the background using media queries. This is done by editing your css file. If you have multiple css files, you will need to know which one is setting your background image and place the media queries in there.

Reponsive website partially based on device instead of screen resolution

I've got my responsive website done with breakpoints setted up with #media queries. I've got couple of basic breakpoints
min-width: 1600px - for TVs and bigger resolution screens (that just center the whole page and make white margins on sides, nothing too significant)
max-width: 1024px - for tablets, there are many changes, especially because tablets has of corse touch screen, which desktops usually haven't. At all it looks pretty different.
max-width: 600px - for smarphones, there is also a lot of changes based especcialy on narrowing the content from two or four colums into one.
Now I found that might be a problem, because there are nowdays tablets which acts in the browser, as they have resolution width for example 1280px, but there are also still computers with width of monitor 1280px too, even smaller, so I can't change the breakpoint value for this.
I of course don't want the desktop version on tablet and tablet version on comuter, becase they're created not as much for resolution but more for the platform.
I know that there are things called user agents like WURFL, which seems to be perfect for this. But is there any way how to connect this value from WURFL (tablet, desktop, smartpohne...) with css #media queries.
For example detect in WURFL that the device is tablet and change the breakpoint value in CSS file, so it shows the tablet version, instead of desktop version? Or is there any other way with similar result as this theoretical solution?

There is no need identify the device, just use the right media queries.
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}

I think you are looking for this
jQuery code to detect mobile devices
http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/

Mobile web app : Using same set of images in multiple resolution devices

I would like to know, if I can maintain a single CSS file for my mobile web app. The web app is targeted for different resolution of android devices. So i would like to know can i use same set of images and scale it down using any CSS styles, rather than keeping multiple images for each resolutions ? The webapp is built using html5, css3 and javascript.
I know we can use css media queries, but through that i will need to load different images based on the device width. I am trying to use same images for all resolution of devices. If i keep a high resolution image overall in the code.
Is this possible ? please let me know.
Thanks in advance. Appreciate any kind of help.

You can do something like this:
#media screen and (max-width: 480px){
.element { background-image: url(../images/bg1.img); }
}
#media screen and (min-width: 800px){
.element { background-image: url(../images/bg2.img); }
}
but you can also set it to maybe 100% (If it should fit the screen on any size)

Icon size using media queries

I am developing an app which runns on mobile and desktop browsers. I'm trying to find a sollution that could fix my icon size. I want icons to be small on desktop browsers but bigger on mobile browsers.
Can media queries detect screen density and if so can screen desinity determine my icon size?
And another thing: Is it better to detect screen size or density and adjust icons depending on the better choice.

Yes there is a media query that detects pixel density. Here is an example:
#media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Then you would change your background image and background image size here */
}
There is also a ton more info in this article at CSS-Tricks.

The question of whether to target device size or pixel density is tricky: it will depend on the specifics each time, and there's nothing to say you shouldn't combine both in your site. The media query you want to cover everything is:
#media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
/* your retina rules here */
}
...which is probably the most helpful if you're sticking with PNGs rather than SVG graphics or an icon font. I recommend looking at retinafy.me - it's a useful resource (but not free), which is where that code came from.