I am doing updates to my personal website and giving it a completely new layout. I have been working with SASS and converting it to CSS. I want my site to display on any device that the user might be using (i.e laptop, iPad, mobile phone). Currently, I have been writing my SASS/CSS using media queries to target each different device. As there are so many different to deceives, I was wondering if there is an easier way to write style for each device without having to target them individually?
#media screen and (width: 375px) and (orientation: portrait) {
button,
#submit,
a.button {
font-size: 18px;
width: 200px;
height: 50px;
}
}
#media screen and (max-width: 414px) and (orientation: portrait) {
button,
#submit,
a.button {
font-size: 18px;
width: 200px;
height: 50px;
}
}
These media quires might help you
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// 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) { ... }
A good approach to writing CSS is to use the mobile first principle. It means you start off from the smallest screen and work your way up. This means that your cascade (the C part of CSS) works to it's fullest potential. After you have small, medium and large looking good, start to work on the "weirder" sizes.
For example, mobile landscape size:
#media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: landscape) {
code goes here
}
This should make everything more manageable.
Here is my media queries that support major multiple devices.
Supported Devices: Moto G4, Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad, iPad Pro, Surface Duo, Galaxy Duo
`#media only screen and (max-width: 280px){
}
#media only screen and (min-width: 281px) and (max-width: 320px){
}
#media only screen and (min-width: 321px) and (max-width: 360px){
}
#media only screen and (min-width: 361px) and (max-width: 500px){
}
#media only screen and (min-width: 501px) and (max-width: 800px){
}
#media only screen and (min-width: 801px) {
}`
Related
I am learning webdesign(wordpress) so I come in problem with media queries.
I use Bootstrap 4 grid system so I am using also media queries of bootstrap 4
which is :
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
I see these media queries are not enough, especially with iPhones and Samsungs new series.
I see that I have to write extra breakpoints to target those mobiles.
I made a search in google and I see another kind of media queries which is targeting width and height with webkit-device-pixel-ratio:2 or 3 etc. I see also there is also a device targeting media queries which makes me confused.
my question is now:
if I use extra breakpoints for 375 width 4014 width iPhones etc will be enough or I have also to target height and webkit-device-pixel ratio.
What do you advise me? There are a lot of mobile devices with different resolutions.
thanks,
I did with this code:
#media screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
.site-header {
background-color:brown;
}
}
but when I open in chrome inspect elements I see it is only targetting Galaxys5 and Moto G4.not iphone or Pixel2.
you can see yourself on: http://webdesignleren.com/
thanks
I have looked at similar questions here and did not find a suitable answer, so forgive me that this question may appear at first to be a duplicate of others here.
My screen resolution is 1366px wide
I have default styles, and then several media queries at the end of the stylesheet, in the following order:
#media only screen and (max-width:1920px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
On my machine, the styles from the very first media query (max-width: 1920px) are being applied. When I inspect in Firebug, it gives me the line # coinciding with a declaration within that first media query.
This is happening across several browsers (Firefox, Chrome)
But, my viewport is just 1366px wide - so, I would expect either max-width:1280px or max-width:1680px to match, and not 1920px.
When I resize to 1024x768, or 800x600, the correct media query styles are applied.
What am I doing wrong?
I've looked for any missing bracket closures and found none. I've validated using the W3C CSS validator service, and checked as Correct, no errors found.
The issue is your logic.
Your first query states max-width: 1920px. Indeed, because your desktop is at 1366px, it is smaller than 1920px, so it is a valid query. Consider this a catch all after your 1680px.
I would suggest re-ordering and starting with smallest, most constraining queries first:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1920px) {
}
An even better approach would be to use min-width for all of your queries:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (min-width: 800px), only screen and (min-device-width: 800px) {
}
#media only screen and (min-width:1024px), only screen and (min-device-width: 1024px) {
}
#media only screen and (min-width:1280px), only screen and (min-device-width: 1280px) {
}
#media only screen and (min-width:1680px), only screen and (min-device-width: 1680px) {
}
#media only screen and (min-width:1920px) {
}
As a best practice, here is Bootstraps queries:
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== 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) {
}
You want to use min-width not max-width. Since you're query is applying to any screen up to 1920px wide, it is always being applied when your screen is no larger than 1366px wide. max-width == <=, min-width == >=.
/* apply these selectors when the width is equal to or greater than 1920px */
#media only screen and (min-width:1920px) {
}
How can I apply the css only for desktops and laptops browser excluding ipad and mobile browsers?
#media only screen and (min-width: 742px) and (max-width: 769px){
#element{
display: none;
}
}
How can you guarantee a user isn't going to view your site/webapp on a desktop device that falls into the viewport width you have stated? You can't.
If really need to be that specific, device specific as apposed to using viewport width, you can sniff the browser I guess.
Here is a quick jquery demo here using:
navigator.userAgent
http://jsfiddle.net/y3ds0xpv/ - note: you'll need to view on a mobile device to see the difference between desktop and mobile.
Ultimately, I'd recommend using this if you need to use this method:
http://detector.dmolsen.com/
You could always do it like this (modified from here):
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
#element{ display: none; } /* your css rules for ipad portrait */
}
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
#element{ display: none; } /* your css rules for ipad landscape */
}
I'm sure you have a valid reason for doing this but I'd be careful. As a rule you should detect features, not devices.
A media query to target iPads (portrait and landscape) would be:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
so to avoid targeting iPads you can just reverse that and get everything larger and everything smaller..
#media only screen and (max-device-width:768px),(min-device-width:1024px) { }
#media only screen and (max-width: 769px){
#element{
display: none;
}
}
#media screen and (min-width:1000px){
#element{display:none;}
}
Using Foundation framework you will have options for all screen sizes be it desktops, tablets or phones. Using their 'large', 'medium' and 'small' functions. It is fairly easy to use.
With Foundation your problem would be fixed by just adding hide-for-small and hide-for-medium classes to the div being displayed only on desktop.
Finally, I got working media query only for desktops or laptops browser:
#media only screen and (min-width: 742px) and (max-width: 769px),
not all and (min-width: 742px) and (max-width: 769px) (orientation: portrait){
#element{
display: none;
}
}
Glad to say, it is working nice.
i want to design a web site.but tell me what are the sizes i can use for responsive website design.
that sizes must contain for mobile,tablets,pcs and other devices..
i want to use them in media queries.. :D
EX for Mobile:
#media only screen and (min-width: 500px) {
}
EX for Tablet:
#media only screen and (min-width: 800px) {
}
Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D
like that i want to know what are the reals sizes for these devices that i can use. :D
/* #1- Desktops */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and netbooks */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
For actual device specifications, check out this link by CSS-tricks..
Here is the full list of media breakpoints
#media all and (max-width: 1690px) { ...}
#media all and (max-width: 1280px) { ...}
#media all and (max-width: 980px) { ... }
#media all and (max-width: 736px) { ... }
#media all and (max-width: 480px) { ... }
Check out for more informations about responsive device sizes : Medium
I hope so it's will help.
I'm using the iOS Simulator to test my responsive theme's media queries for the various iOS devices but the below media queries aren't rendering. I've referenced w3.org media queries standards plus this blog post, A Pixel Identity Crisis from A List Apart, and Mozilla's blog post amongst a few others, but am not seeing what's breaking the queries, do you?
/*-- iPhone 4, 4S Retina -----------------------*/
#media
screen and (min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-o-min-pixel-ratio:2/1) and (min-width:320px) and (max-width:600px),
screen and (min--moz-pixel-ratio:2) and (min-width:320px) and (max-width:600px),/* Firefox browsers prior to FF 16) */
screen and (min-resolution:2ddpx) and (min-width:320px) and (max-width:600px) {
/*styles here */
}
/*------- iPhone 2G, 3G, 3GS -------------*/
#media
screen and (max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-o-max-device-pixel-ratio: 1/5) and (min-width: 320px) and (max-width: 600px),
screen and (max--moz-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), /* Firefox browsers prior to FF 16) */
screen and (max-resolution: 1.5ddpx) and (min-width: 320px) and (max-width: 600px) {
/*styles here*/
}
If you are only targeting ios (you don't have to worry about opera/firefox) then you can safely shorten your media queries to something like:
/*-- iPhone 4, 4S Retina -----------------------*/
#media screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px) {
/*styles here */
}
/*------- iPhone 2G, 3G, 3GS -------------*/
#media screen and (min-width: 320px) and (max-width: 600px){
/*styles here*/
}
It might also be a good idea to have (orientation: landscape) / (orientation: portrait) ones in there too if your site needs them.