my layout works fine in big monitors....
but i am trying to display properly in small screen laptops....
which width should i need to use it in the css media queries for the 13 inch monitor...
i am confused abt width for 13 inch laptop
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (min-width: 1200px) {
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
Most 13" monitors are going to be larger than 960px or even larger than 1140px wide. 960px wide is kind of an old standard, more often now 1140px is used, especially for responsive design.
That said, only a netbook with a 8" or 9" screen will have issues displaying. Every 13" monitor I know of should not have any issues displaying your web page. If you want to design for the netbook, they are similar in resolution to most tablets in portrait position. So if you are doing media queries for tablet and mobile phone, then the netbooks should adopt the styles of the tablet, as their resolutions are 800x600 up to 1024x768.
In general, there is no reason to make a different set of styles for anything other than mobile phone and tablet.
Here you can fund all resolutions and their screen sizes:
http://www.codeply.com/responsive-design-cheatsheet.html
For the question you asked:
13' Macbook Air 1440 px x 900px 13 inches
For more testings and research, You can also check this website that tests all required screen resolutions as well provide option to enter custom screen sizes:
http://www.infobyip.com/testwebsiteresolution.php
PS: None of the websites I mentioned above are connected to me, I am just a regular user and a web developer.
Related
I am doing my first steps in repsonsive design world.
I found out that the most recommended way is to use min-width and max-width to find out the size of the display area, like this:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... } /* for smaller tablets */
#media (max-width: 500px) { ... } /* for cellphones */
The problem is that newer phones have high density screens. My phone has width of 980px. Therefore it loads wrong CSS which is meant for larger screens.
I tried out max-device-width. It takes into account logical pixels and my phone width is 393 of those. It worked. But max-device-width is deprecated so i don't want to use it.
I found some examples of min-resolution and max-resolution as well.
It is also possible to use JavaScript to determine if the browser is mobile browser, but it doesn't seem to be the correct approach.
So I got kind of confused. Please give me hints what and how should I use to determine if the site is running on a mobile device and how to load the correct CSS for it. How it has to be done in correct and reliable way?
Thank you in advance.
first at all, the way you use it, wouldnt work well. For example:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
if a screen has the width of 900px, then both media queries would apply. Because 900px is below 1200px and below 991px. For that specific case your media queries should be as follow:
/* for desktops */
#media only screen
and (min-width: 1367px) {
...
}
/* for laptops */
#media only screen
and (min-width: 991px)
and (max-width: 1366px) {
...
}
/* for large tablets */
#media only screen
and (min-width: 769px)
and (max-width: 990px) {
...
}
/* for smaller tablets */
#media only screen
and (min-width: 481px)
and (max-width: 768px) {
...
}
/* for cellphones */
#media only screen
and (max-width: 480px) {
...
}
as you noticed, it should contain min and max width unless its the lwoer or top end (desktop and smartphones) the smallest smartphone size is 320px btw.
Also I changed the media queries to screen only, its just good practise as you want to address screens only.
Screen size:
Notice the difference between Hardware pixels and viewport Pixels. your phone might have something above 900 hardware pixels but onyl half or a quarter of it as viewport pixels.
Hardware pixels are the pixels that a device has physically and viewport pixels the pixels which can bea dressed by css.
The reason is, that the ahdrware pixels are not actually adressable is for sharpness. besides, it owuld be nearly unreadably otehrwise.
Edit: The cheap laptops screen panels have a resolution of 1366 x 768px. so the laptop width should be also set to 1366px.
There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.
To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.
For example, to set your site to display at a minimum width of 500px on mobile, use:
<meta name="viewport" content="width=500, initial-scale=1">
To display the site at the browser's width use:
<meta name="viewport" content="width=device-width">
In addition to the MDN article, the following article may be helpful for setting display widths for tablets.
For responsive design, it's recommended to use Mobile First approach. You start with styling the mobile version and change it while the viewport grows.
With the following media queries you have different problems:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... }
#media (max-width: 500px) { ... }
the correct approach should be
// you start with mobile version
#media (min-width: 500px) { ... } // will match only screen width >= 500px
#media (max-width: 768px) { ... } // will match only screen width >= 768px
#media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and < 900px (could be tablets also)
#media (min-width: 991px) { ... } // match also ipad on landscape mode
#media (min-width: 1200px) { ... } /* for desktops */
So my website looks great on Desktops having a display resolution of 1920x1080 or higher. It's an e-commerce website so I am having a lot of elements on product pages.
The problem is when viewed on Desktop or Tablets with resolution 1366X768 or less, a lot of these elements doesn't show up so users have to scroll down the page to view those elements. I fear that some users may not even notice these elements and I will potentially lose customers.
So, I thought why not scale down the webpage to around 75% so that all of the elements fit without scrolling and with little googling around I found this CSS code.
#media screen and (max-width: 1366px) and (max-height: 768px) {
html {
zoom: 0.75
}
}
Now it runs great on desktops and tablets and I loved how my webpages just scale down to 75% with all the necessary elements on the screen right in front of the user without requiring them to scroll down the webpage.
But I noticed a huge problem with it when I opened my webpage on mobile. Those were also scaled down to 75% of their original dimensions. I don't want them to scale down on mobile. I need them as is. Any ideas how I can achieve this?
You can do like this. Its work for ipad to laptop screens. its target the browser screens.
#media screen and (min-width: 768px) and (max-width: 1366px) {
html {
zoom: 0.75
}
}
Or you can use this code. max-device-width is the width of the device's entire rendering area. same as height
#media screen and (max-device-width: 1366px) and (max-device-height: 768px)
{
html {
zoom: 0.75
}
}
You should use device width/height instead:
#media screen and (max-device-width: 1366px) and (max-device-height: 768px) {
html {
zoom: 0.75
}
}
This should suffice, zooms in for any screen above 768px in width(ipad and above):
#media screen and (min-width: 768px){
html {
zoom:0.75;
}
}
It's been a while since I had to do a responsive edm template and screen sizes have gotten larger.
I've been testing and failing miserably all afternoon - I essentially just wanted to have 2 media queries to target the 2 main breakpoints of:
Breakpoint 1 (iPhone 5S): 320px (shows 320px)
Breakpoint 2 (iPhone 6+): 414px (shows 375px)
So I don't understand why the below doesn't work
#media screen and (max-width: 414px) {
table.bannerTable img {width:375px !important;}
}
#media screen and (max-width: 361px) {
table.bannerTable img {width:320px !important;}
}
I just want to have one banner image thats 700px wide in desktop, 375px wide in large smart phones and 320px wide in the rest of devices.
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
}
I'm trying to achieve these sizes for my srcset image:
Desktop (min-width: 1024px): 100vw
Tablet (min-width: 768px): 150vw
Phone+Other: 200vw
(It's supposed to be larger than the screen since it's animated).
But what is the correct order within the sizes attribute?
This did not work (way larger image was loaded):
sizes="(min-width: 768px) 150vw, (min-width: 1024px) 100vw, 200vw"
This seems to work for now:
sizes="(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw"
On my 1440px Macbook Air, the availble 1440px image is not loaded but instead a larger 1700px version. But this might be a Browser decision.
But in theory min-width: 786px is also true for min-width: 1024px, as a screen larger than 1024px is also larger than 768px. In CSS the last true argument is used (in this case this would be the wrong 768px size), but what about HTML and srcset?
Do I need to do something like this:
sizes="(min-width: 1024px) 100vw, (min-width: 768px) and (max-width: 1023px) 150vw, 200vw"
But I have never seen that before....
The browser selects the first size for which the query matches. So your example could either be (as your working example):
(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw
or the other way round:
(max-width: 767px) 200vw, (max-width: 1023px) 150vw, 100vw
If your browser window is 1440px wide and the pixel density of your screen is 1x an available 1440px-image should be loaded by the browser (unless it has already a larger version in the cache).