For example if I have two sets of images for my website, one set is low resolution,
another set is high resolution, I to show the low res to the screen size like 1280 width users, and the others are high res images, how can I do that?
Using javascript? or any other method ? possible to define in css or html?
You can use CSS media queries for that. More about media queries here.
Example:
/* This block applies to all "screen" devices
*/
#media screen {
.some-content {
background-image: url(largeimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 1279px (e.g., < 1280)
*/
#media screen and (max-width: 1279px) {
/* Use `mediumimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(mediumimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 639px (e.g., < 640)
*/
#media screen and (max-width: 639px) {
/* Use `smallimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(smallimage.jpg);
}
}
Note the descending order of the above: First we specify for the largest device, then smaller ones, then smaller ones, so that latter queries override earlier ones (since a device with a screen of, say, 1024 pixels will match both of the first two rules).
you can design it with something like
body {width: 100%; height: 100%; position:relative;}
you will face this problem for browser compatibility.
define it in your css you can have any class you wish . i have done it for my website and you can have the same image working for you.
Related
I have a UI element that is designed to work best at exactly '200px' width. But if the size of the UI needs to change based on window / media size, it would be a pain to have to adjust this Component bit by bit and change the width away from 200px.
Is changing the size of a component by using transform: scale(x) to adjust to window / media size an acceptable practice? Is it costly in performance? In practical reality, window / media size will be set from the beginning, so the scale function would only have to be run once anways.
if (screen width < 600px) {
element.style.transform = "scale(.7)"
} else {
element.style.transform = "scale(1)"
}
Is transform: scale(x) a costly operation?
No, the transform operation doesn't require a DOM update. A browser makes a rendering update. Its pros are its performance costs are low, it works fast. Its cons are scaling could greatly downgrade its visual quality (for example, blur images), the downscaled component with its content could be hard to use or read.
A JS usage to set CSS is definitely a costly way to make changes. The most efficient way is to use CSS only (media query).
It looks weird to 'scale' a component for a small screen. A common way to solve it now is to make a responsive layout. But think, you don't need to let its content be dynamic inside. Such a task could be solved with CSS. Just make another step forward. Tie the inner content with outer sizes at CSS - use em/rem units instead of px for all its measures. And the media query will change its base font-size only. Different size, no potential scaling visualization issues, same content position. :)
The CSS could be like this below. Sorry, a minimal working HTML, CSS, JS to demonstrate the concept. To check JS in different screen sizes in this snippet - change your screen size, refresh the snippet. The CSS option works without a refresh.
function setSizeJs() {
const element = document.getElementById('target-element-px');
element.style.transform = window.innerWidth < 600 ? 'scale(.7)' : 'scale(1)';
}
.parent {
font-size: 14px;
}
#target-element-px {
/* original width */
width: 200px;
/* colorize element to show its size */
background-color: green;
}
#target-element-em {
/* main style, will be applied always */
/* an equivalent of 'width 200px' in EMs, where EM is taken as '14px' from the 'parent' class */
width: 14.28571428571429em;
background-color: grey;
}
#media screen and (max-width: 600px) {
/* additional style, will be applied only when the screen size will be less than 600px */
/* it will overwrite the main style */
#target-element-em {
font-size: 0.7em;
}
}
<div class="parent">
<div id="target-element-px" class="target-element" onload="setSizeJs">
Some content for original 200px width
</div>
<div id="target-element-em" class="target-element">
Some content for original 200px width
</div>
</div>
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
on the following url:
https://gist.github.com/marcedwards/3446599
I found the following CSS code to check high DPI screens.
#media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Your code to swap higher DPI images */
}
This code is based on:
https://bjango.com/articles/min-device-pixel-ratio/
My question is: Is there any way to create a flag (true/false) based on if above conditions are meet or not?
My goal is: I have a set of images: <img src="..." /> where depending on the screen resolution (above condition meets or not) I wanna use one image or other.
Thanks!
As #Huangism and #phuzi pointed out, the way is to use: srcset.
The only caveat about this is it is not supported by IE yet (as of today).
Could use some temporary element with a class to change on media query trigger to test:
HTML:
<p class="my-flag">Did the media query trigger?</p>
CSS:
#media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
/* Your code to swap higher DPI images */
.my-flag {
color: red;
}
}
And if you need this check in JS just ask
if($('.my-flag').style.color == "red")) {
/* do stuff */
}
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.
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.matchMedia(). 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 matchMedia to learn more and this one for more info on Testing media queries programmatically.