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 */
Related
I have a h1 with font size that I want to adjust based on the screen width.
const Title = styled.h1`
font-size: 2.5rem;
margin: 0;
color: ${COLOR.blue};
#media (min-width: 600px) {
font-size: 2rem;
}
`;
I tried it on my Pixel 4a and use USB debugging. Running window.screen.width shows 393 and window.screen.height shows 851. But my font size is 2 rem instead of 2.5 rem... I tried #media only screen and (min-width:600px) but its also the same
What Im doing wrong? Thanks
If you want your css to implement on 600px device width or less, then you need to add
#media only screen and (max-width: 600px) { //your css }
When you define min-width in media query it means it will work in bigger screen than you have mentioned in media query and if you want css in smaller devices than you should add max-width in media query which will work in small devices
i was reading here about zoom
Zoom website depending on monitor resolution?
and it seems nothing works
I want to test the browser width / browser view port and then, if it is a high number, I want to automatically have the web page zoomed to say, 110%
cross browser compatible.
how to do it?
The better approach to achieve this using responsive design.
Calculate every element in rem unit so that as you change the font-size on root element; all of your element's looks bigger/smaller on screen through desire media quires.
i.e: let suppose you have a div and h1 elements and you want to show bigger/smaller on different screen then you should follow the code:
<div>
<h1>Hello</h1>
</div>
<style>
div{
height: 25rem;
border:1px solid red;
}
h1{
font-size: 4rem;
}
#media screen and (min-width: 600px) {
html{
font-size: 16px;
}
}
#media screen and (min-width: 1200px) {
html{
font-size: 20px;
}
}
</style>
So in above code the div and h1 tag should be big or small as you change your font-size on html tag depending upon media query breakpoints.
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
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
})
I'm working on a responsive website.
The logo image size will change as of on different screen size devices
the html part
<div class="logo responsive-img">
<img id="logo-header" src="assets/img/logo2.png" alt="logo" />
</div>
the media css
#media (max-width: 360px) {
/*Logo*/
.responsive-img {
background-image: url(../img/logo-320.png);
width:200px !important;
height:28px !important;
}
.responsive-img img {
display:none;
}
}
#media (max-width: 480px) {
/*Logo*/
.responsive-img {
background-image: url(../img/logo-mobile.png);
width:300px !important;
height:42px !important;
}
.responsive-img img {
display:none;
}
}
I tested it on local desktop browser, chrome and firefox. When browser resized to 480 the logo image replaced. However when browser keep going resize to 360, the logo img won't change.
Short answer
Move your 480px media above the 360px media.
Long answer
That's because order of occurrence matters in css. If two rules have the same specificity and they both define the same properties, the one that comes after will override the one that comes before.
.apple {
color:red; //this gets applied first
}
.apple {
color:blue; //this gets applied second, which overrides the first
}
The same applies to media queries. In your case all your defined properties and rules are the same.
It works above 360px because the 360px media doesn't get applied and the 480px media does.
Your 360px media does work at 360px. It just so happens that your 480px media comes after it and also gets applied since the screen width is in fact less than 480px. So the 480px media will override the same properties that your 360px media defines.