I have a webpage which has a fixed layout.
It was built using standard size of 1280x800.
Since it doesn't need to be mobile compatible, and not accessed by the public, it was built using fixed size elements.
The problem is, I need it to scale automatically according to browser size.
I managed to do it with the viewport metatag, but that works only for mobile browser (which I do not need...)
e.g. How can the page display correctly, when opened in Chrome on a desktop with 1024x768 resolution, without the need to manually zoom out in the browser?
Thanks!
Replace every px with a vw based on the ratio of the width to the size at 1280x800.
So if you had a div with width: 1280px you would replace it with width: 100vw.
Set your font-size on the body in this way to get the text to scale, and use em or rem to size larger text.
If your font size was 16 at 1280x800, then you would want font-size: 1.25vw.
Use CSS media queries to achieve different styles at different screen widths (responsive). Here is an example of some different media queries.
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
}
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 */
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
}
What I wish to achieve is having 1 left that will occupy a minimum of 300px or if the screen is bigger 25% of it, next to it I wish to put another div that will occupy the rest of the screen with the option to add a third div beside those 2 that will shrink the middle one to get a width of 25% or minimum of 300px;
Here is the sample of the div I have created:
.parents{
width:25%;;
min-width:300px;
height:100%;
background-image:url(img/background_parents.jpg);
border-right:3px solid darkgray;
overflow:auto;
}
Now beside this div I need 1 with adjustable width because of the option of adding a third panel with the same width of the one you see above.
I can do this with jquery, but I wonder if there is an option of achieving this through CSS, because I wish to escape the route of constant calculations of the screen width.
Try using media queries to define your width based on the detected device screen. This is my usual setup:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.
This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.
Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:
#media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
width: 1170px;
margin: 0 auto;
box-shadow: 0 0 20px #f25aeb;
background: #fff;
}
When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.
If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.
The Fix
The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.
The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.
I use this media quires:
/* Mobile styles go first, without media
queries. */
#media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320
pixels) */
}
#media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels)
*/
}
#media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024
pixels) */
}
#media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140
pixels) */
}
for each resolutions and it works.
when I write some style in layout.css it applies in every screen size and in /* #Media Queries
section, you have these sections:
/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
so none of these do what I want.
Where should I write large screen specific css codes?
suppose you have a div like <div claas="example"> </div>
now write a css for .example which will be applied for those screen which are larger than range you mentioned in your media query
.example{
/*..for larger screen style goes here....*/
}
#media screen and (max-width: 1400px) {
.example {
/*...now give style for those screen which are less than 1400px...*/
}
}
#media screen and (max-width: 1300px) {
.example {
/*...now give style for those screen which are less than 1300px...*/
}
}
in the above you code you mention three different styles for
>1400px screen size
for 1300 to 1400px screen size
<1300px screen size
EDIT::
"/* Larger than standard 960 (devices and browsers) */"
.example{
/*..style for larger than 960px....*/
}
#media screen and (max-width: 960px) {
.example {
/*..style for lesser than or equal to 960 px...*/
}
}