From http://www.w3.org/TR/css3-mediaqueries/ we can see that there are many ways to declare media queries, eg:
(1) #media screen and (min-width: 400px) and (max-width: 700px) { … }
(2) #media handheld and (min-width: 20em),
screen and (min-width: 20em) { … }
(3) #media screen and (device-aspect-ratio: 16/9) { … }
(4) #media screen and (device-width: 800px) { … }
And so on.
I would like to know if there is any way in javascript or in the browser that we can find which width ranges certain media queries apply to.
Eg (1) would be between 400 and 700 and (4) would be exactly 800
It seems like it would be tedious to parse the media query strings to determine this information. Is there an easier way?
Try this mediaquery bookmarklet: http://fhemberger.github.com/mediaquery-bookmarklet/
Related
I am using custom $spacer variable for adjusting UI/page multiple elements size. how to use this under #media query? As below its not working. how to use different $spacer for different resolution? pls help.
#media (min-width: 1280px) {
$spacer: 16px;
}
#media (min-width: 1600px) {
$spacer: 24px;
}
I am building a web page which contains svg graphics. I want to make it responsive.
If the page is loaded on a physically small device, i.e. a smart phone, the graphics is too small to be viewed well, so I have to change it in case of a smart phone client.
The exact device or even the exact screen resolution is not important. Important is that I can answer the question "Is the client a small device?".
How can I do that?
Assuming that this is a common question, there should be a best practise for this or a common library. Can you help me?
I'd suggest doing it like this, putting this tag on the head of your index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow you to work with media queries, where you can choose different css style properties depending on the size of the screen. Some examples:
#media all and (min-width:1200px){ ... }
#media all and (min-width: 960px) and (max-width: 1199px) { ... }
#media all and (min-width: 768px) and (max-width: 959px) { ... }
#media all and (min-width: 480px) and (max-width: 767px){ ... }
#media all and (max-width: 599px) { ... }
#media all and (max-width: 479px) { ... }
There are many other ways to set up the media queries, there is definitely one that is perfect for what you're trying to do.
W3 media query example
Using media queries by Mozilla
Finally, I'd suggest setting the height, max-height and width and max-width styles with the vh and vw units, such as:
height: 50vh;
width: 50vw;
VH and VW stands for viewport height and viewport width. This will make it so an image's size, for example, is exactly half the size of a device screen.
I have checked many sites using bootstrap menu, it collapse after certain screen size , I am using 22 inch screen and navbar collapse when I see my website..
You have to use media query for your screen size in terms of pixels.
For example:
// Landscape phones and below
#media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
#media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
#media (min-width: 1200px) { .. }
Bootstrap menu can be resized for almost many kind of screens like mobile, tablet, ipad, laptop, desktop etc. But some resolutions may have missed out in their media query. For ex: as you told " I am using 22 inch screen ".. your desktop's max-width may not have listed in their inbuilt media query.
So, what I suggest is it is better to write your own media query for that types of cases.
For example,
#media (max-width: 1080px) { ... }
#media (max-width: 1440px) { ... }
Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?
Yes, in CSS it is possible to use #media rules to target an exact width.
CSS Example
#media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px wide, apply the following CSS. When your viewport width changes to 981px or 979px or anything that isn't 980px wide, the CSS will be removed.
Unlike the other answers, this is not using max-width or min-width because the #media rules allow you to just define width, which will target the exact measurement you give it. The width is defined using the viewport width.
Note: You can learn more about the CSS3 #media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.
You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
#media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}
You can use the exact width like this:
#media screen and (width: 980px) {
/* CSS rules here */
}
using both width and height exactly for ipad pro width:1024px, height:1366px
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)
#media screen and (min-width: 980px) {
body {
background-color: lightblue;
}
}
I Use This Code To Automatically Detect Users Screen Resolution And Redirect To Another Page
<script>
if (screen.width==1367 && screen.height==768)
{
window.location="http://www.yoursite.com"
}
</script>
But For Every Screen Resolution I Cant Edit The Site.
Is It Possible That I Just Make Single Page That Can Automatic Fit To Screen.
Thank-You IN Advance.
You could use CSS3 media queries rather than javascript to detect the device and load the page accordingly.
#media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}
#media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
You would also need to add the meta port view tag as below:
<meta name="viewport" content="initial-scale=1.0">
You can use media queries and specify different stylesheets for different screens.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
for example
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
For examples of already put up websites see: http://mediaqueri.es/
'defau1t' is write. Also you can set it by css like=> "width:100%"; you can check http://www.w3schools.com/js/js_window.asp too. Everything depends on your requirements.