How to Use Particular CSS Styles Based on Screen Size/Device

How to use particular CSS styles based on screen size / device

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.

how do i include css based on screen size of the device

If you want to have only one css per page, but in that css file you want to import other css files that have differences based on screen size, you can do it like for example for screens less than 960px

@media screen and (max-width: 960px) 
{

/* your imports */
@import url('/css/styles1.css');
@import url('/css/styles2.css');

}

Also if you want to use only two css files in general, you might want to search for media queries and work on that a little :)

There are different methods for using different styles for different devices and screens, you might find this article useful about that http://css-tricks.com/resolution-specific-stylesheets/

Which says, e.g, you can specify in which screen size you want to show a css file like this;

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Change CSS based on screen size

Coding for phones can be tricky since there's so many different scales and resolutions but I would recommend trying this https://stackoverflow.com/a/13550716/10816600 and if that doesn't work for you, you can redirect the phone users to another page that you have made work for phones.

https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

Switching CSS classes based on screen size

Take a look at this https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

Another way is to attach the resize event some piece of "switch code".

Something like this: http://jsfiddle.net/s5dvb/

HTML

<div id="body" class="limit400">
    <h1>Hey :D</h1>
</div>

CSS

.limit400 h1 { font-size:10px; }
.limit1200 h1 { font-size:50px; }

$(window).on('resize', function() {
    if($(window).height() > 400) {
        $('#body').addClass('limit1200');
        $('#body').removeClass('limit400');
    }else{
        $('#body').addClass('limit400');
        $('#body').removeClass('limit1200');
    }
})

About the frameworks, try http://purecss.io/ or http://getbootstrap.com/

Hope it helps.

css for different screen resolutions?

Media queries is a good choice for your problem.

You don't have to use different classes for these, just you have to define different behaviour based on resolution.

You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.

Have a look a below example:

/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

Actual dimensions can vary as per your case.

This is the same method many framework uses to implement responsiveness.

How to change CSS when the screen size changes

Media queries can help you to define different styles for different screen sizes. Also, I'd recommend a different accomodation of HTML items, e.g.:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Some Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <style>
    body {
        margin: 0;

    }

    .Header {
        background-color: black;
        text-align: right;
    }

    .socialmedia {
        transform: translate(0, -50%);
        align-items: center;
    }

    .socialmedia a{
      display:inline;
    }

    h1 {
      color:white; 
      font-family: Verdana; 
      font-style: italic; 
      font-size: x-large;
      text-align: center; padding-top: 20px;
    }

    @media (max-width:700px){
        .headerLogo h1 {
            text-align:left;
        }

    }
    @media (min-width:1000px){
      .socialmedia {
        margin-right:100px;
      }
    }
    .preorder button {
        background-color: white;
        border: 0;
        height: 35px;
        width: 110px;
        margin-left: 35px;
    }

    .footer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 90px;
        background-color: black;
    }

    .img-fluid{
        width: inherit;
        height: 782px;
    }

    .mySlides~.mySlides {
        position: absolute;
        top: 0;
        left: 100%;
        transition: 0.7s;
    }
    a{text-decoration: none;}
    a:hover{
        text-decoration:none;
    }
  </style>
</head>
<body>    
<div class="Header" id="myHeader">
  <a class="headerLogo" href="file:///C:/Noah's%20stuff/Home.html" ><h1>Some Title</h1></a>
  <div class="socialmedia">
      <a class="Facebook" href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
      <a class="Instagram" href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
      <a class="Youtube" href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
      <button style = "background-color: white;">Pre-Order</button>
  </div>
</div>
</body>
</html>

When screen size < 700px then text will align to the left, and when screen size is >= 1000 then social media box will add a margin to the right.

How to Use Particular CSS Styles Based on Screen Size/Device