I am trying to change font size according to screen size in my materialize.css. But it isn't working. What am I doing wrong exactly?
#media screen and (min-device-width: 600) and (max-device-width: 1500) {
h1{
font-size: 2em;
}
h5{
font-size: 14px;
color: green;
}}
Simply add px to value
#media screen and (min-device-width: 600px) and (max-device-width: 1500px) {
h1{
font-size: 2em;
}
h5{
font-size: 14px;
color: green;
}}
Please do add px to the widths such as 600px not 600.
Also, do put this meta tag at the top <meta name="viewport" content="width=device-width, initial-scale=1.0">
A meta viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Related
I was curious what was going wrong here with my media queries. I just want one style for 'reasonably small screens' and one style for 'reasonably large screens'. So I did the following:
#media (min-width: 501px) {
#courtName {
font-size: 17px;
}
#courtInfoWindow {
font-size: 13px;
}
}
#media (max-width:500px) {
#courtName {
font-size: 64px;
}
#courtInfoWindow {
font-size: 40px;
}
}
I would expect the min width size to show on 'large screens' and the max width size to show on small screens (less than 500px). Yet, the smaller size is shown on all screen sizes. I've tried using just one media query to override a default size. Tried switching the order. Nothing is working. What gives?
before starting make sure you have following view port meta in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
After this
please note following
#media (min-width: 501px) { /** CSS HERE **/ }
This will work only on screen size larger than 501 pixels wide.
#media (max-width: 500px)
This will work only on screen sizes smaller than 500 pixels wide.
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.
Im working on a mobile first site. The media queries are set with ems like so:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
#media (min-width: 320em) {
}
#media (min-width: 600em) {
}
#media (min-width: 770em) {
}
I now need to add a max-width media query just below the same breakpoint as my middle media query, so that any screen size is either one or the other.
If I was working with px this would be easy:
#media (max-width: 599px) {
}
#media (min-width: 600px) {
}
Can the same be done with ems? Just to reiterate, I need it so any screen size will be in either the min or max media query. I cant have any 'no mans land' in between.
As its possible to have decimal places on ems I think the following wont work. A screen could be 599.5ems wide as so be in between the 2 media queries.
#media (max-width: 599em) {
}
#media (min-width: 600em) {
}
I've built a few sites with both min and max width media queries, and for me they've been painfully difficult to maintain and didn't actually add any value.
I like to use min-width queries for mobile-first sites, because it makes sense to me to think about my design from my smallest screen width first and then slowly add or change features as the width increases. This has the added bonus of eliminating the "no man's land" issue. See example: (thanks #IMI for calculating the pixel widths)
When you build a site like this, you end up specifying everything that changes from the previous query in each subsequent query, but behavior is also much more predictable as your screen will either fall into one category or the other, and whichever one it falls in, you know exactly what properties are being applied.
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;}
}
#media (min-width: 30em) { /* = 480px */
body {color:green;}
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
Yes, you can use decimals in your em based media queries.
The em values of the media queries will be based on the Browser's "initial" font-size value. This is typically 16px. So you are usually safe calculating your em based media queries by dividing the pixel value by 16.
Example: to get the em equivalent of #media (min-width: 600px) you would divide 600px by 16 which would result in 37.5 and a media query of #media (min-width: 37.5em)
No Man's Land:
If you have to mix min-width and max-width media queries it is best to use a max-width media query that equals the min-width of your next media query as stated in #maioman's answer and that should get rid of the "no man's land" gap problem. That way, a device with a max of 600px will use all your styles up to and including the max-width:37.5em styles while devices with have a higher resolution will use the following relevant styles including the min-width:37.5em.
Snippet Example of em based media queries with decimals:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;} /* You wont see this color since the max-width media query is overrides it */
}
#media (max-width: 37.4375em) { /* = 599px */
body {color:green;} /* Be careful where you place the max-width media query. It will override the smaller min-width if placed after. */
}
#media (max-width: 37.5em) { /* = 600px */
body {color:green;} /* As stated in #maioman's answer, using a max-width that equals the min-width of your next media query should get rid of the "no man's land" problem. */
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
since min-width will override max-width if you do something like this you should be safe:
#media screen and (max-width: 600em) {
}
#media screen and (min-width: 600em) {
}
div {
width:5em;
height:5em;
}
#media screen and (max-width: 12em) {
div {
background:green
}
}
#media screen and (min-width: 12em) {
div {
background:red
}
}
<div>test</div>
fiddle
The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12px, 1em is equal to 12px. Ems are scalable in nature, so 2em would equal 24px, .5em would equal 6px, etc.
The size can be calculated from pixels to em using this formula: pixels/12(current font-size)=em
Check out http://www.w3schools.com/css/css_font.asp
In media queries “rem” as well as “em” don’t refer to the root element (html) but to the browser defaults directly which can only be changed using the browser settings for base font size. This means that even if you specify a font size of 30px on your html element, media queries will still use "user agent's (browser's) initial font-size" as “em” / “rem” based for the media queries unless you also change your default font size in the browser settings.
I will use(for the good of math):
"user agent's initial font-size" = 10px;
So let say you have:
#media (max-width: 59em) {
}
#media (min-width: 60em) {
}
When the browser compute the em that will be equal to:
#media (max-width: 590px) { // 59 * 10(supposed font-size)
}
#media (min-width: 600px) { // 60 * 10(supposed font-size)
}
Here you have a range of 10px where the screen could between the 2 media queries.
Probably you would say, I do a little math and solve the problem but to do math in css there is calc
like this:
#media (max-width: calc(60em - 1px);) { // 60 * 10 = 600px - 1px = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
But unfortunately calc() not working within media queries.
But 1px = 0.1em 1 / 10(supposed font-size)
So you have to do the math a priori:
#media (max-width: calc(59.9em);) { // 60em - 0.1em(1px) = 59.9 * 10 = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
So the only that you have to do is change the "10" to the "user agent's (browser's) initial font-size" and do the math a priori.
I hope this help you.
i'm newbie and i have a site, i want to make a responsive design, it is responsive for mobile but not responsive on tablet, i want create tablet design like pc layout not mobile, can you help me how solved this problem? maybe meta viewport and css wrong code, how many px to create min or max media width?
this is my dummy site
http://silanycorp.com/a
and this site for check responsive layout
http://ami.responsivedesign.is/#
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS code
#media (max-width: 768px) {
.container{
padding:0;
}
.logo{
padding-left:0;
}
.hide-on-desktop{
display:block
}
.header-wrapper{
padding: 0;
}
.header-outer{
}
thanks for your help :)
You can have multiple stylesheets loaded based on the width of the viewport the user has.
This can be accomplished with the following tag:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
You can also set it in the stylesheet with something like this:
#media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Here is a good article on the process: http://css-tricks.com/css-media-queries/
I have recently started toying around with responsive web design and have done a basic test here:
http://test.studev.net/
It works fine in a desktop browser however I am getting a little confused on how to deal with the smallest width design when loaded on a high resolution device for example retina displays on iPhones. Because of this type of display it means for example size 16px which is normal to read on a desktop is impossible to read on an iPhone 4/5.
How is this usually dealt with?
Well either if you want to make the text smaller on mobile or bigger you would do
#media screen and (max-width: 480px) {
font-size: 10px; /* Smaller */
}
or
#media screen and (max-width: 480px) {
font-size: 20px; /*Larger*/
}
And make sure you have this in your <HEAD> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Or you can also disable zooming like so:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And for IE10 support, try:
#-ms-viewport{
width:device-width
}
You can choose the size of the font according to the screen-width:
/* Large desktop */
#media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
font-size: 12px;
}
To make sure your layout stretch on the mobile screen you have to use the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This meta tag needs to be inside the head tag. The "device-width" will be the maximum pixels your screen can show. You can also set a constant value there (600px).
The initial-scale=1 means it will be zoomed automatically to 100%. (0.5 => 50%)