I'm a beginner in front-end web development. I want to know the order of priority when writing CSS media queries in desktop first approach. Do i write mobile queries first and tablet queries below it, in this manner:
/*Desktop CSS*/
/*Media query for tablet*/
/*Media query for Mobile*/
or the other way around.
You can write anywhere but if you are a beginner then I suggest you create a separate file for responsive CSS so that you will not confused.
SO in the style.css desktop approach and in responsive.css all media queries for mobile and tablet.
Standered Media queries:
#media screen and (min-width: 1200px){} /* Desktop */
#media screen and (min-width: 1025px) and (max-width: 1199px){} /* small laptop */
#media screen and (min-width: 768px) and (max-width: 1024px){} /* tablet */
#media screen and (min-width: 575px) and (max-width: 767.98px){} /* tablet and large mobiles */
#media screen and (min-width: 320px) and (max-width: 480px){} /* Mobile*/
Thanks
Related
I have file .psd with sizes 1920X1080.
I need to make responsive website that will look good for small and big screens.
I have made from this psd html with pixel perfect technic.
I just don't understand how to make from it design for smaller screens.
Please advise.
Using CCS3 media queries! Example for Desktop first:
// Your code for Desktop devices
#media only screen and (max-width: 768px) {
// Here your code for mobile
}
or for Mobile First
// Your code for Mobile devices
#media only screen and (min-width: 768px) {
// Here your code for tablet
}
#media only screen and (min-width: 992px) {
// Here your code for Small Desktop
}
Different rules:
#media screen and (max-width: 992px) and (max-height: 700px) {
// Code
}
or:
#media screen and (max-width: 992px) and (min-height: 400px) {
// Code
}
These are only some example. You must study media queries.
This is my bootstrap website: http://www.feather.com.lk/index.php
My main issue is in iPad portrait view. The elements are not resizing as intended. However, further investigation into the issue showed that I only have this issue when the browser size is scaled down to 768px and 769px. I'm not sure how to solve this issue.
The media queries I used:
#media screen and (min-width: 0px) and (max-width:769px)
#media screen and (min-width: 770px) and (max-width: 992px)
#media screen and (min-width: 993px) and (max-width: 1199px)
#media screen and (min-width: 1200px)
It seems like there is a mismatch between your media queries and the ones provided by Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
(Bootstrap Media Queries)
As you can see here, the smallest Bootstrap media query takes a maximum width of 767px (notice that the next one starts from 768px). However, the smallest media query that you have used takes the width of up to 769px. That must be the reason why there are two pixels, where the website doesn't look as intended.
Try changing your media queries to be the same as the ones in Bootstrap.
I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
and extra guide
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#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) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I hope this can help
I'm trying to use these six media queries in my project:
#media screen and (min-width:320px) {} //for small mobiles and large mobile in portrait
#media screen and (min-width:480px) {} //larg mobiles and mobiles in landscape
#media screen and (min-width:600px) {} //for small tablets
#media screen and (min-width:768px) {} //for normal tablets
#media screen and (min-width:1024px) {} //for normal tablets, laptop, desktop
#media screen and (min-width:1281px) {} //large laptop, desktop
But something strange happens, only my first media query is working fine; the others don't work, and the others work combined. For example, in my #media screen and (min-width:1281px) media query, the result I have is the header and footer of this media query and the body of my media query (min-width:480px).
Does somebody out there know why this is happening?
For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.
Have I missed anything?
#media only screen and (min-width: 1024px) {
/*styling here*/
}
#media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}
#media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}
Check Out this,
and let me know whether it is working or not
You need to specify device width.
I think you may need to specify it as 'min-device-width'.
#media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
/*Mobile styling here*/
}