How to change CSS id property depending upon screen size


Tags: html,css

Problem :

I do know how to use media-screen functionality, but wanna ask you guys something else, something which I really needed for my project. Let me paste some code snippet so that I can elaborate you exactly what I'm looking for. In below I'm pasting a css ID which I made for my site design:

#Disp_name {
color: #424854;
font-family: 'Open Sans',sans-serif;
font-size: 5.5em;
font-weight: bold;
line-height: 105px;
/*margin: 200px 0 25px;*/
margin: 0px 0 25px;
text-rendering: optimizelegibility;
transition: color 0.3s ease 0s; }

Now I want when anyone open up my project from a small screen device, like **When open up from 400> and <450px the font-size will be 4em and if >300 and <400px then 3em and if less than <300px then 2em.

What should I do? Please help



Solution :

As DevIshone said, media queries are exactly what you're looking for. In that case it would look something like this

@media (max-width: 450px) and (min-width: 400px) {
    font-size: 4em;
}
@media (max-width: 400px) and (min-width: 300px) {
    font-size: 3em;
}
@media (max-width: 300px) {
    font-size: 2em;
}

    CSS Howto..

    How to make input+label in a form appear one by one?

    How to make the section and aside touch the footer?

    How To Left Align the Title Using CSS

    How to position
    element absolute from browser window?

    jquery .show() hides immediately

    How to put four images 2x2 on other image as background, CSS?

    How to change tinymce scrollbar color?

    How to read Base64 VLQ code?

    How do i enable hover effect on an image if the text before it is hovered?

    How to make pull right display properly?

    How to make parent fullscreen div to grow with absolutely positioned child using CSS and jeet?

    How to center a CSS Hexagon

    How to concat css files with images and fonts form Bower in Grunt/Gulp/Webpack

    How can I change the color of the last letter in an element?

    How to format a button with in Form tag, html?

    Show image when hovering on a span

    How can write a CSS style for a parent class?

    How do I position a div below an image with changing height?

    How to make div height 100% inside relative div?

    how to get this modal window to work correctly?

    How to align HTML horizontaly using CSS

    How to create a card flip effect on DIV using javascript

    How to top align two divs inside a third one?

    css 3d animation, how?

    How to set backgroundImage property in css file in flex 4?

    How to position multiple elements on one line, if they are in an absolute element?

    How can I wrap this text so it doesn't overflow past the widget container?

    How to set this CSS arrow transparent?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How do I make my links be next to each other in CSS/HTML?