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
Related
I'm trying to work out how to use EM media queries in my latest project. However after some testing I've found that the media queries are ever so slightly off and I can't work out why. It might have something to do with it using the parents font size instead of the body. My body is set to 14px and my workings out look like:
$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px
body font size:
body{
font-size: 14px;
line-height: 1.5;
min-height: 100%;
}
*(from my SCSS breakpoint variables) From what I understand I did: 768 / 14 (base font size) = width in em's
Say I've a div called header, there is no font-size set on this div, only children of this div. Surely it would still then use the body font-size?
Ems in media queries are never based on the font size of body, or any other element for that matter. They always refer to the default font size set by the user in the browser preferences. In most browsers this default font size is around 16px, and in CSS this corresponds to the initial value of the font-size property which is medium. From the spec:
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
This same default font size is inherited by the root element, which is html, not body (see here). Specifying a relative font size on body just means body bases its own calculation on the computed font size of html. This being stated, note that setting font-size on html will not affect how ems are calculated in media queries either.
Your guesswork is correct, the em unit sets the font size relative to the parent element's font-size, not relative to the document root. If you're looking for the latter you're looking for the rem unit, but browser support might be a problem for you, depending on your application.
See the following Fiddle for a sample: http://jsfiddle.net/afp46/
HTML:
<span >This is text</span>
<div><span >This is text</span></div>
<span><span>This is text</span></span>
CSS:
body {
font-size: 14px;
}
div {
font-size: 16px;
}
span {
font-size: 1.2em;
}
I would change that to body font size 100% and then you have the flexibility of EMs and %s site wide
I would highly recommend you do font-sizing with rem, which stands for "root em". It's much more consistent. Read more about it here: http://snook.ca/archives/html_and_css/font-size-with-rem
Also, I would recommend adding this to your CSS:
html {
font-size: 62.5%;
}
Now, your rems or ems will be easy to convert. 10px font-size would be 1rem or 1em. Nice, right? :) Again, use rems, its a much better practice these days.
Please try this code. I have already used this my last project it working in fine. so please try.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px. */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px */
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Bootstrap 3 has nice CSS classes in responsive utilities that allow me to hide or show some blocks depending upon the screen resolution http://getbootstrap.com/css/#responsive-utilities-classes
I have some style rules in a CSS file that I want to be applied or not based on screen resolution.
How can I do it?
I'm going to minimize all my CSS files into the one on production deployment, but this could be avoided if there are no other solutions than having separate CSS files for different screen resolutions.
Use #media queries. They serve this exact purpose. Here's an example how they work:
#media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}
This would work only on devices whose width is equal to or less than 800px.
Read up more about media queries on the Mozilla Developer Network.
Detection is automatic. You must specify what css can be used for each screen resolution:
/* for all screens, use 14px font size */
body {
font-size: 14px;
}
/* responsive, form small screens, use 13px font size */
#media (max-width: 479px) {
body {
font-size: 13px;
}
}
#media queries serve this purpose. Here's an example:
#media only screen and (max-width: 991px) and (min-width: 769px){
/* CSS that should be displayed if width is equal to or less than 991px and larger
than 768px goes here */
}
#media only screen and (max-width: 991px){
/* CSS that should be displayed if width is equal to or less than 991px goes here */
}
I created a little javascript tool to style elements on screen size without using media queries or recompiling bootstrap css:
https://github.com/Heras/Responsive-Breakpoints
Just add class responsive-breakpoints to any element, and it will automagically add xs sm md lg xl classes to those elements.
Demo: https://codepen.io/HerasHackwork/pen/rGGNEK
Why not use #media-queries?
These are designed for that exact purpose.
You can also do this with jQuery, but that's a last resort in my book.
var s = document.createElement("script");
//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
s.type = "text/javascript";
s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
s.type = "text/javascript";
s.src = "http://www.example.com/public/assets/css2";
}
$(function(){
$("head").append(s); //Inject stylesheet
})
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).
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!
How to write CSS only for devices which are below than 320px in screen width, but not for all?
I want to write CSS like
Only example to explain to question
devices with min-width of 300 px { color:red}
devices with max-width of 299 px { color:blue}
And how to control Landscape mode in both condition?
myselector { color: blue; }
#media screen and (min-width: 300px) {
myselector {
color: red;
}
}
Though you may need to adjust this as needed depending on whether you care about CSS px width of the viewport or CSS px width of the device screen or something else. That wasn't clear from the question.
There is a wonderful article that can explain it much better than I can here:
http://www.alistapart.com/articles/responsive-web-design/
I find that this code isn't very reliable on feature phones and some blackberrys. In which case I use Device Atlas to get the width on the server side.
#media only screen and (max-width: 299px) {
color:blue;
}
#media only screen and (min-device-width: 300px) {
color:red;
}
It's not as famous as screen and (max-width: or min-width) but CSS3 media queries also allow you to apply css depending on your orientation device.
A code example
#media screen and (orientation:portrait) {
/* Portrait styles */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
}
See there specification :
http://www.w3.org/TR/css3-mediaqueries/#orientation
You could do this using javascript.
if (document.clientWidth < 300) {
document.getElementById("yourElement").style.color="blue");
} else if (document.clientWidth >= 300) {
document.getElementById("yourElement").style.color="red");
}
Or something like that.
You could probably also find a way to include a different style sheet if it's under a certain pixel width. I'm not exactly sure how to modify a <head> with JS, though, so you'll have to wait for another answer or google around a bit.