Can I use Media queries with current div style maybe like that:
.myDiv {
anyStyle : ...;
#media (myDiv's width > 100px) {
height: 40px;
}
}
I found several pages,but there said only using window params.
if anybody know how to use the media, please tell me about
I saw the links:
http://www.w3schools.com/css/css_mediatypes.asp
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
No.
You can't use media queries to check the width of an item on your website. Media queries only check the viewport variables like width and height. You should use them to check what kind of screen your user has and not what style you have applied to your div.
You should do it that way:
.myDiv {
/* your styles */
}
#media only screen (min-width: 100px) {
.myDiv {
/* other styles */
}
}
The only way to work with media queries is to rely on device type (screen, print etc.) and/or device width (min-width, max-width).
Related
Pressing F12 I can instantly change CSS of elements in Chrome. However, I can not input #media screen and (max-width) similar to here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
When I press enter it simply disappears. What can I do to dynamically add and remove media queries?
When you edit the styles for a specific element in the inspector, it is as though you were editing the element's inline style attribute: you can only place property declarations such as color: red in your example. This is even reflected in the DOM visualization itself as you edit an element's styles. Media queries don't belong in inline styles, they belong in #media rules which appear only in a proper stylesheet.
On Chrome, you will need to edit the inspector stylesheet directly in order to include your media queries. You can reach it by going to the Sources panel and choosing inspector-stylesheet.
Since this involves writing CSS, you will need to select the element. You can (usually) get a unique CSS selector for the element you choose by right-clicking it in the Elements panel and choosing Copy CSS path.
Then just write your CSS:
#media screen and (max-width: 300px) {
/* selector for your element */ { color: red; }
}
You can use New Style Rule.
Click on Plus symbol (+) besides .cls.
and then, you'll see it generates new class. Now click on inspector-stylesheet.
You will be redirect to Sources Tab with almost blank stylesheet. Now, you can put Media Queries in there.
You can always add the CSS within style tags in the head section. Just edit the HTML by right-clicking on the html and select "Edit as HTML". For example,
<style>
#media screen and (min-width: 0px) and (max-width: 400px) {
body {
background-color: red;
}
}
#media screen and (min-width: 401px) and (max-width: 599px) {
body {
background-color: green;
}
}
#media screen and (min-width: 600px) {
body {
background-color: blue;
}
}
</style>
I had the same problem and finally figured out that when I was entering for example:
#media (max-width: 767px)
.col-sm-3 {
width: 75%;
}
my screen size was actually more than 767px. So when I pressed enter, it disappeared and seemed to not work. But what I realized is when I adjusted the screen size of my browser to below 768px, I saw the media query in the styles.
Is it possible to set the size of the text depending on the width of a browser window?
For example when window-width is 1000, than text is 40.
And when the window- width is 500 than font size is 20.
If you are targeting fairly new browsers (>=IE10) and want the text to continuously adjust its size, you can try out the new CSS3 vw unit which is a length unit based on the width of the viewport. However, webkit currently doesn't update the length after it has been set, but this can be worked around by for example binding a resize event which resets the width. Correction: At least Chrome 35.0.1916.114 doesn't seem to have this problem anymore, but Safari 7.0.4 still does. The quirksmode article is apparently a bit outdated.
JSFiddle (with javascript fix for Webkit)
List of supported browsers as well as some other nifty units
Better list of supported browsers (thanks Ian)
Yes, you can do this using #media queries. For the examples you named, you would need the following
#media (min-width: 500px) {
body {
font-size:20px;
}
}
#media (min-width: 1000px) {
body {
font-size:40px;
}
}
That would define the font-size to 20px for a browser width of 500-1000px, and to 40px for a browser width of more than 1000px.
Note that if you want to add a style for the default font-size, you would need to define that style before the #media queries, otherwise the styles defined in the queries wouldn't override the default styles.
You may use media queries as others have pointed out, or you may use this Javascript plugin.
I will include the media queries explanation below just because:
#media (min-width: 1000px) {
body {
font-size:40px;
}
}
This code will change the font size when the window is bigger than 1000px.
Here is a JSFiddle
This question is also a duplicate of many others I've seen...
/* Base size (for mobile) */
body {
font-size: 10px
}
/* All devices when window is bigger than 500 */
#media all and (min-width: 500px) {
body {
font-size: 20px;
}
}
/* All devices when window is bigger than 1000 */
#media all and (min-width: 1000px) {
body {
font-size: 40px;
}
}
There are several jQuery libraries that will achieve this.
With these the width of your text is usually updated on window.resize()
FitText
SlabText
hatchshow
BigText
I have this form placed in the footer of my page (has just one text box and one button). I want to try and apply #media to it, based on the viewport width available ... So for example, in my case the full width this form needs it about 270px or so. So I want to apply CSS to say that:
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
How can I do this using #media ?
There's no if/else syntax for #media, so you would need to repeat the same media query in two separate #media rules and use not for one of them to mean "else".
In your case, the media query would be all and (min-width: 270px). (You need to have a media type for not to work; the default is all so I'm just using that.)
Your CSS would then look like this:
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
#media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
I should add that one popular way is to make use of the cascade by having just one #media rule for overriding styles:
/* Apply second set of CSS rules */
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
However this falls short if you have any styles outside the #media rule that aren't (or cannot be) overridden inside it. Those styles would continue to apply, and you have no way of undoing them short of actually redeclaring them. Sometimes you cannot undo them by redeclaring them, and that's when you cannot use this method to apply styles. See my answer to this question for a detailed explanation.
In this example, the height: 200px declaration will always apply:
.example {
width: 200px;
height: 200px;
}
#media all and (min-width: 270px) {
.example {
width: 400px;
}
}
Of course, if that's not a problem then you can use this in order to avoid duplicating media queries. But if you're looking for a strict if/else construct, then you'll have to use not and a duplicated media query.
Yes. Typically start with your main CSS and then alter the design based on width (or media type) with additional CSS that will overwrite any previous CSS.
<style type=text/css">
/* the main css for the site */
.main-content {width:960px;}
/* the css adjustment for the site between two widths */
#media screen and (max-width:600px) and (min-width:271px) {
.main-content {width:100%;}
}
/* the css adjustment for the site with a max-width of 270px */
#media screen and (max-width:270px) {
.main-content {width:260px;}
}
</style>
This is how you would implement that scenarion
<style>
// apply second set of CSS rules
#media (min-width: 270px) {
// apply first set of CSS rules
}
</style>
In this situation the CSS rules applied beforehand would get overwritten when the media query argument is met.
I have been trying to hide an element at a max-width of 980px using media queries but for some reason it is still displaying.
If I use a media query with min-width the element disappears but with this code it is still showing and I can figure out why?
#media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
Can anyone see anything wrong with my code? I'm using FF responsive design view fro testing at the moment.
With your current max-widthmedia query, display:none is going to apply until the document reaches a width of 980px, rather than at 980px.
From your question, it seems like you want the opposite to happen, which is why you've had success with min-width. Switching from max-width to min-width should solve things.
Otherwise, you are going to have to set your element to display: none in your non-media query css, and use display:block in your max-width media query.
CSS
/* Only applies while screen is 980px or less */
#media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
/* only applies while screen is 980px or greater */
#media (min-width: 980px) {
.welcome-msg {
display:none;
}
}
/* if you must use max-width, this is a solution */
/* otherwise, use min-width IMHO */
.welcome-msg {
display:none;
}
#media (max-width:980px) {
.welcome-msg {
display:block; /* element will only show up if width is less than or equal to 980px */
}
}
If that's not what you are trying to accomplish, It would be helpful to have a Codepen example for us to better answer your question.
Good luck!
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.