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
Related
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) {
}`
I'm looking for a list of generic CSS media queries to match phone (both portrait and landscape), tablet (both portrait and landscape) and desktop.
I have found many posts with some generic media queries, but they are often different and maybe I don't understand them.
For instance, the following query:
#media only screen and (max-width: 768px) { }
does it match all phones (portrait and landscape) and tablet portrait? Or what?
I also found other examples, like the following:
/* mobile */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* tablet */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
and
/* mobile */
#media screen and (max-width:767px) { }
/* tablet */
#media screen and (max-width:1024px) { }
Which of the previous queries are correct to correctly match phone (both portrait and landscape) and tablet (both portrait and landscape)?
Thanks
Best way to use media queries, like Marcos said is to use resolutions. Your first code #media only screen and (max-width: 768px) { } will target all the devices that have maximal screen resolution of 768px. So if your phone have a resolution of 640px it will affect it, if your phone have a bigger resolution of 768px the code you enter in {} will be ignored. Usually this is used to make responsive designs, and you use queries with different resolutions for different devices (you can easily find online the most common queries).
Hope it helps.
I'm working on responsive designed web site using media queries. But i do not know how to take a good width set.
As you can see on this table, there is a lot of different resolution even for a single type of device. And as resolution is coming bigger and bigger on mobile device, it is hard to know what design to apply for a specific resolution.
For now, I'm using this :
Mobile First
#media screen and (min-width:720px) => Phablet
#media screen and (min-width:768px) => Tablet
#media screen and (min-width:1024px) => Desktop
Thank you for any advice or recomendations !
Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience
When you design your responsive website you should consider the size of the screen and not the device type. The media queries helps you do that.
If you want to style your site per device, you can use the user agent value, but this is not recommended since you'll have to work hard to maintain your code for new devices, new browsers, browsers versions etc while when using the screen size, all of this does not matter.
You can see some standard resolutions in this link.
BUT, in my opinion, you should first design your website layout, and only then adjust it with media queries to fit possible screen sizes.
Why? As I said before, the screen resolutions variety is big and if you'll design a mobile version that is targeted to 320px your site won't be optimized to 350px screens or 400px screens.
TIPS
When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style.
Use percentage instead of pixels, it will make your work easier.
Example
I have a table with 5 columns. The data looks good when the screen size is bigger than 600px so I add a breakpoint at 600px and hides 1 less important column when the screen size is smaller. Devices with big screens such as desktops and tablets will display all the data, while mobile phones with small screens will display part of the data.
State of mind
Not directly related to the question but important aspect in responsive design.
Responsive design also relate to the fact that the user have a different state of mind when using a mobile phone or a desktop. For example, when you open your bank's site in the evening and check your stocks you want as much data on the screen. When you open the same page in the your lunch break your probably want to see few important details and not all the graphs of last year.
Here is media queries for common device breakpoints.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
The screen widths Bootstrap v3.x uses are as follows:
Extra small devices Phones (<768px) / .col-xs-
Small devices Tablets (≥768px) / .col-sm-
Medium devices Desktops (≥992px) / .col-md-
Large devices Desktops (≥1200px) / .col-lg-
So, these are good to use and work well in practice.
Take a look at this...
http://getbootstrap.com/
For big websites I use Bootstrap and sometimes (for simple websites) I create all the style with some #mediaqueries. It's very simple, just think all the code in percentage.
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
Inside the container, your structure must have widths in percentage like this...
.col-1 {
width: 40%;
float: left;
}
.col-2 {
width: 60%;
float: left;
}
#media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}
In some simple interfaces, if you start to develop the project in this way, you will have great chances to have a fully responsive site using break points only to adjust the flow of objects.
i will provide mine because #muni s solution was a bit overkill for me
note: if you want to add custom definitions for several resolutions together, say something like this:
//mobile generally
#media screen and (max-width: 1199) {
.irns-desktop{
display: none;
}
.irns-mobile{
display: initial;
}
}
Be sure to add those definitions on top of the accurate definitions, so it cascades correctly (e.g. 'smartphone portrait' must win versus 'mobile generally')
//here all definitions to apply globally
//desktop
#media only screen
and (min-width : 1200) {
}
//tablet landscape
#media screen and (min-width: 1024px) and (max-width: 1600px) {
} // end media query
//tablet portrait
#media screen and (min-width: 768px) and (max-width: 1023px) {
}//end media definition
//smartphone landscape
#media screen and (min-width: 480px) and (max-width: 767px) {
}//end media query
//smartphone portrait
#media screen /*and (min-width: 320px)*/
and (max-width: 479px) {
}
//end media query
I am using html5 to design mobile device screens to create platform independent application.
I am using media queries for the same reason but these media queries support some mentioned devices like iphone4, ipad, ipad mini, samsung devices.
What is the assured thing that irrespective of any device size/resolution the page will fit perfectly on any device.
Thanks.
I don't understand how and why are your media queries are that specific, that they only cover the mentioned devices.
A better approach is to use ranged media query, e.g. taken from bootstrap:
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
I am new to responsive web design, and got confused because there are various preferences about which media queries to use and which devices to target. Is there a standard? I'd like to target iPhone, iPads, and other popular devices.
I have found this on the web:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 and high pixel ratio devices ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
But I do not know if it is outdated. I do not know which rule targets iPhone 4, because I ran the iPhone simulator and the CSS didn't work (referring to last CSS rule).
My thought with media queries is that your goal should be to make a device-agnostic framework for your website. That means it needs to be both resolution and pixel density aware, given Apple's (and others) push into super high resolution screens.
2018 update: my approach now drops the screen and min-device-pixel-ratio media attributes and uses screen-size ranges. Because every device now registers as screen, and almost all of them are high resolution now - you really don't need those attributes. If you're on a super high traffic site maybe they still make sense though.
Here is how I lay out my breakpoints globally:
/* Below 380px is really just the iPhone SE at this point */
#media (min-width: 380px) and (max-width: 480px) {
/* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}
#media (min-width: 480px) and (max-width: 768px) {
/* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}
#media (min-width: 768px) and (max-width: 980px) {
/* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}
#media (min-width: 980px) and (max-width: 1200px) {
/* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}
#media (min-width: 1200px) and (max-width: 1600px) {
/* Large screen desktop (27"), laptops (15+") */
}
#media (min-width: 1600px) {
/* Very large screen, 4K desktop + small TVs */
}
2012 advice: I've seen on achieving that dual mandate comes from Chris Coyier's CSS-tricks.com:
http://css-tricks.com/snippets/css/retina-display-media-query/
The concept is to create the initial break points based on size and then have pixel-density media queries follow. This approach gives you three breakpoints, and each breakpoint has a pixel-density-aware option.
Here is Coyier's sample code (I simplified out the vendor-specific prefixes so you can grasp the concept):
#media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){
/* Large screen, retina, stuff to override above media query */
}
I really like this concept: you save bandwidth for older, likely bandwidth constrained devices while giving the new, high-res devices what they need. The only code you would have to put in the pixel-density media queries should be background-image stuff, so the higher-res imagery overrides its pixelated counterpart on older devices.
Realize that you are trying to hit a moving target my friend ;) This is an evolving concept, css-tricks.com, stackoverflow and other blogs seem to be the best way to keep up. Good luck.
The "breakpoints" in your layout are likely to become quickly outdated as new devices with different viewport ratios come on the market. Perhaps rather than target specific devices, I prefer the approach of having breakpoints in your design where you want it to break, rather than bending your design to specific devices.
This article: Device-Agnostic Approach To Responsive Web Design explains it better than I could ever do.
Alternatively, you could refer to some of the most popular frameworks like 320 and Up or Twitter Bootstrap - they are updated very often and should provide you with a good starting point with media query breakpoints.