I am a newbie to responsive design using CSS3 media queries. I clearly understand how we target different devices using these media queries but the place where i am confused is BROWSER ZOOMING!!.
For Eg: This is my normal body css rule
#body {
margin: 0 auto;
width: 70%;
clear: both;
}
and when i want to change this css rule to target a devices whose width falls in the range of 150px and 600px i add this particular media query.
#media only screen and (min-width:150px) and (max-width:600px){
#body {
margin: 0 auto;
width: 90%;
clear: both;
}
}
Problem: I am using Google Chrome and when i zoom in to about 200% then this particular media query comes into play.
How do i know what media queries to write for different zooming levels or to put another way whats the relation between browser zooming levels and pixel width.
After a lot searching. I found my answer.
-
We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.
For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini.
therefore you can target both Ipad mini and browser zooming(#175%) by using a common media query
i.e #media screen and (min-width:732px)
So if you target different devices using media queries (make site responsive for different Devices) then your browser zooming is itself taken into account.
I solved like that (.scss)
#media only screen and (min-height: 500px) and (max-height: 800px) and
(min-width: 600px) {
margin-top: 0px;
}
Related
I am having a website already developed using Expression Engine. Currently if i open site on mobile phone or other device few sections cut off from the screen.
After debugging i found that i need to change height of DIV <div id="tabmiddle" style="height:1500px;"> in respect of device. I am very new to expression engine.
I am looking out something like
if (Mobile Device)
{
<div id="tabmiddle" style="height:2000px;">
}else if(Tab Device)
{
<div id="tabmiddle" style="height:1800px;">
}else
{
<div id="tabmiddle" style="height:1500px;">
}
Look into media queries.
Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.
They allow you to apply specific styles based on the screen dimensions.
For example:
#media (max-width: 600px) {
#tabmiddle {
height: 1500px;
}
}
This will change the height of your element with tabmiddle as the ID to 1500 pixels high whenever the screen is smaller than 600 pixels; typically a mobile/tablet device.
You can use following two media rules to do this:
For Mobile devices (width<768px):
#media (max-width: 768px){
#tabmiddle{
height: 2000px;
}
}
For Tab devices (width<992px):
#media (max-width: 992px){
#tabmiddle{
height: 1800px;
}
}
If device width is 992px or more than that, it will follow your default CSS height written in style tag of tabmiddle element.
If I check HTML on 2 different Systems with different resolutions then the view is distorted.
Is there any way of calculating the screen width and height at run time?
I lack experience with CSS but did some research and found about media queries, but there they are suggesting different classes (if i am not wrong).
My question is it possible to get the height and width at run time and use only one css ?
something like :
.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
Media queries is a good choice for your problem.
You don't have to use different classes for these, just you have to define different behaviour based on resolution.
You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.
Have a look a below example:
/* For Mobile */
#media screen and (max-width: 540px) {
.view {
width: 400px;
}
}
/* For Tablets */
#media screen and (min-width: 540px) and (max-width: 780px) {
.view {
width: 600px;
}
}
Actual dimensions can vary as per your case.
This is the same method many framework uses to implement responsiveness.
In your example you want to set a min-width ou height, so you probably just need to use a value computed out of the screen size. If that's the case, you can use the units vw or vh, which mean 1% of screen width and 1% of screen height, respectively.
.view {
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
}
By using the calc() function you can get more sophisticated results. And to that end, you might also like to look into CSS variables. For example:
.view {
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}
But if you need multiple rules, like changing layout, colors, fonts etc, than you need media queries. In its most basic form you'd do something like:
#media (min-width: 800px){
.class{
/* Your styling goes here */
}
}
In the example above, any styling inside the media query would kick in if the screen is at least 800px wide. (I wouldn't load different CSS files depending on the screen size, btw.)
Finally, since you used the word "resolution", I feel I must add that you can set the media queries to match screen resolutions, too. This comes in handy when serving large images. For example:
#media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi) {
.my-image{
content: url("http://example.com/high-def-image");
}
}
That could be used to serve a higher res image as a progressive enhancement to larger screens or retina displays.
You can combine different attributes in single media query. This example will apply these styles on all screens with width at least 500px and height at least 400px:
#media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}
Nope. they are not suggesting different classes.
With media queries you can set differents css rules based on screen (or media) resolution (width, height, aspect-ratio...) in a single file, or you can include different stylesheet based on the query.
I suggest you to follow a tutorial to start using media queries.
We are developing a new UI for one our products and for a number of reasons have the need to toggle between two <div> tags depending on whether the device be mobile or desktop. Each <div> will contain appropriate content for either mobile or desktop, but because we only have a single HTML page, we need the ability to turn on one <div> while turning off the other one.
This question is something of a follow up to this SO question which is very similar to what I am asking here. To recap the solution found there, there are two <div>s:
<div class="visible-phone">
content for phone
</div>
<div class="visible-desktop">
content for desktop
</div>
and there are two CSS rules which employ either the maximum or minimum screen resolution:
.visible-phone{
#media (max-width: 480px) { more css }
}
.visible-desktop{
#media (min-width: 768px) { more css }
}
To get to the point, consider a device with a minimum width of 700px and a maximum width of 900px. This would fall through the cracks of the above CSS logic and would result in neither <div> being visible. As another example, a device ranging from 500px to 750px would also not be covered.
Can anyone suggest a full-proof approach to avoid the weakness in the referenced answer? CSS based solutions would be preferred here.
What you could use is display none within the media query. Use the different classes assigned to each div such as mobile and desktop then in the media query for desktop set .visiblephone{display:none;} and query for mobile set .visible-desktop{display:none;}
This will ensure that within your specified media query one div will always be hidden, then you just have to get your screen size values =)
if i understand you correctly you are trying to do:
CSS
#media screen and (max-width: 480px) {
.visible-phone{
display: block !important;
}
.visible-desktop{
display: none !important;
}
}
#media screen and (min-width: 480px) {
.visible-phone{
display: none !important;
}
.visible-desktop{
display: block !important;
}
}
Use Media Queries
/* If the screen size is 600px wide or less, hide the element */
#media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
My goal is to stop from changing the layout at a given resolution, say 768px wide.
Is there a way to set that across the board in my app?
You can give your container a min-width of whatever amount you want.
#media all and (min-width: 768px){
body {
min-width: 960px;
}
}
I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes