I am trying to adapt the three background images for different resolutions (mobile, tablet and computer screen in 1920 x 1080). How should I do?.enter link description here
You'll want to use media-queries in your CSS files.
You can read more about how media-query works here but the following CSS is a general guide to how you'd want to manage your queries.
/* Mobile screens */
#media (max-width: 400px) {
#background-image{
background-image: url('imageMobile.jpg');
}
}
/* Larger than phone. Tablet-sized. */
#media (min-width: 401px) {
#background-image{
background-image: url('imageTablet.jpg');
}
}
/* Desktop-sized. */
#media (min-width: 920px) {
#background-image{
background-image: url('imageDesktop.jpg');
}
}
/* Larger than Desktop HD */
#media (min-width: 1200px) {
#background-image{
background-image: url('imageHDDesktop.jpg');
}
}
Elsewhere in your CSS - not in a media-query, you would define all the other properties of your container element, and then the media-queries will choose the background-image that best fits their size.
Edit: A few years back, when media-queries were introduced, people used to use max-width exclusively. Now there is a newer responsive design approach that uses min-width instead, using the nature of CSS' 'cascade' to apply and then overwrite each successive rule until the final query is the correct one. This way, smaller devices won't have to load the media queries for devices larger than their own screen, which turns into a performance boost on older mobile devices.
Related
I have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
If I check HTML on 2 different Systems with different resolutions then the view is distorted.
Is there any way of calculating the screen width and height at run time?
I lack experience with CSS but did some research and found about media queries, but there they are suggesting different classes (if i am not wrong).
My question is it possible to get the height and width at run time and use only one css ?
something like :
.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
Media queries is a good choice for your problem.
You don't have to use different classes for these, just you have to define different behaviour based on resolution.
You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.
Have a look a below example:
/* For Mobile */
#media screen and (max-width: 540px) {
.view {
width: 400px;
}
}
/* For Tablets */
#media screen and (min-width: 540px) and (max-width: 780px) {
.view {
width: 600px;
}
}
Actual dimensions can vary as per your case.
This is the same method many framework uses to implement responsiveness.
In your example you want to set a min-width ou height, so you probably just need to use a value computed out of the screen size. If that's the case, you can use the units vw or vh, which mean 1% of screen width and 1% of screen height, respectively.
.view {
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
}
By using the calc() function you can get more sophisticated results. And to that end, you might also like to look into CSS variables. For example:
.view {
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}
But if you need multiple rules, like changing layout, colors, fonts etc, than you need media queries. In its most basic form you'd do something like:
#media (min-width: 800px){
.class{
/* Your styling goes here */
}
}
In the example above, any styling inside the media query would kick in if the screen is at least 800px wide. (I wouldn't load different CSS files depending on the screen size, btw.)
Finally, since you used the word "resolution", I feel I must add that you can set the media queries to match screen resolutions, too. This comes in handy when serving large images. For example:
#media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi) {
.my-image{
content: url("http://example.com/high-def-image");
}
}
That could be used to serve a higher res image as a progressive enhancement to larger screens or retina displays.
You can combine different attributes in single media query. This example will apply these styles on all screens with width at least 500px and height at least 400px:
#media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}
Nope. they are not suggesting different classes.
With media queries you can set differents css rules based on screen (or media) resolution (width, height, aspect-ratio...) in a single file, or you can include different stylesheet based on the query.
I suggest you to follow a tutorial to start using media queries.
I am currently designing a landing page for a personal project and I thought about using a screen-covering image (100% width and 100% height of browser window) to round up the experience.
After the usual normalization, I've started with
html, body {
height: 100%;
overflow: hidden;
}
#hero {
width: 100%;
min-height: 100%;
height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
and began with loads of media queries for both portrait and landscape orientation, you'll get the concept from this snippet:
...
#media only screen and (min-width: 2049px) and (max-width: 2560px) and (min-height: 1441px) and (max-height: 1600px) {
#hero {
background-image: url(../img/hero/landscape/cover-2560-1600.jpg); /* 8:5 */
}
}
#media only screen and (min-width: 2049px) and (max-width: 2560px) and (min-height: 1601px) and (max-height: 2048px) {
#hero {
background-image: url(../img/hero/landscape/cover-2560-2048.jpg); /* 5:4; */
}
}
#media only screen and (min-width: 2561px) and (min-height: 2049px) {
#hero {
background-image: url(../img/hero/cover-any-max.jpg); /* fallback for ultra high resolutions */
}
}
Apart from the insane amount of work that needs to be done to create a good quality image for the most used resolutions and write media queries for each single one of them, none of those queries is able to handle uncommon browser sizes, if, for example, a user drags his window to be very wide but also very short, he gets only a white background.
I would appreciate tips regarding this issue, as most coverage of responsive images I've found online was not very helpful, as it wasn't used as extensively as I desire.
One way would be to use a single large image, much larger than any resolution you would expect a visitor to your site to be using and reduce the quality right down. This does not look great at 100% size but when scaled down onto the smaller resolutions it will begin to look good. Doing this you can then use one image for portrait and one for landscape or just use one image with the following:
html, body {
height:100%;
margin:0;
}
body {
background-image:url('../img/hero/cover-any-max.jpg');
background-size:cover;
}
Portrait and landscape media queries:
#media only screen and (orientation : landscape)
#media only screen and (orientation : portrait)
For more information on the HiDPI low quality approach check out this article - html5rocks
You could use the aspect-ratio queries to capture when the viewport is getting very wide but also very short:
#media only screen (min-aspect-ratio: 8/5) and (max-aspect-ratio: 8/4)
{
#hero {
background-image: url(../img/hero/landscape/cover-2560-1600.jpg); /* 8:4 ~8:5 */
}
}
/* Your other aspect-ratio queries */
/* If browser is very wide + small */
#media only screen (min-aspect-ratio: 22/1) and (max-aspect-ratio: 22/2)
{
/* Assign other styles to handle it */
}
/* If browser is very narrow + tall */
#media only screen (min-aspect-ratio: 1/22) and (max-aspect-ratio: 2/22)
{
/* Assign other styles to handle it */
}
You obviously need to determine the the breakpoints yourself.
OK, if you just have one image this won't seem like a great solution, but if you have several, or you accept user submitted content which you don't control, then having a server side solution (RESS) which scales or crops your images on the fly to fit your visitor's screen perfectly, is really your best bet.
You'll go nuts writing out all the possible media queries and pre scaling your images. Also, as you mention, device aspect ratios are different or you may come across devices with an odd resolution...not to mention Retina displays etc.
If you really want a fool proof approach, go RESS. I'm aware of Pixtulate but I'm sure there are others.
I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes