How to make the application look the same on different screens using css?

user_15624120 0
Viewed 107

I am currently trying to write a project and I have a problem that the main page of the application looks different on screens of different sizes. Is it possible to somehow achieve that it looks the same on all screens using CSS, or do I need to do responsive web design? I added 2 examples and the css code below.

enter image description here

enter image description here


body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-image: url("plant.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.login-box p {
    color: grey;
    font-size: 45px;
    left: 50%;
}

.login-box {
    width: 280px;
    position: absolute;
    border-left-color: green;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: grey;
}

.login-box h1 {
    float: inside;
    font-size: 39px;
    border-bottom: 4px solid #4caf50;
    margin-bottom: 10px;
    padding: 13px 0;
}

.h2 {
    top: 50%;
    left: 50%;
}

.textbox {
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #4caf50;
}

.textbox input {
    border: none;
    outline: #4caf50;
    background: none;
    font-size: 12px;
    color: white;
    width: 80px;
    float: left;
    margin: 10px;
}

.btn {
    width: 100%;
    background: none;
    border: 2px solid green;
    color: grey;
    padding: 5px;
    font-size: 20px;
    cursor: pointer;
    margin: 12px 0;
}

.btnNoAccount {
    width: 30%;
    background: none;
    border: none;
    color: grey;
    padding: 5px;
    font-size: 12px;
    cursor: pointer;
    margin: 12px 0;
    float: right;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    left: 42%;
    color: grey;
    margin: auto;

    word-spacing: 10px;

}
responsiveness spring-boot responsive css html
2 Answers

Using JavaScript, we can test the width of the window and change the active CSS file accordingly. This will work across all browsers. You can have an ID for a element like any other, so let’s add that:

  <link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Then we can use that as a hook and change the href value of the stylesheet. The browser will see that change and unapply the old CSS and reapply the newly linked CSS. We’ll run our little adjustment test once right away, and then anytime the window is resized thereafter.

  function adjustStyle(width) {
  width = parseInt(width);
  if (width < 701) {
    $("#size-stylesheet").attr("href", "css/narrow.css");
  } else if (width < 900) {
    $("#size-stylesheet").attr("href", "css/medium.css");
  } else {
     $("#size-stylesheet").attr("href", "css/wide.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});
user_153460860

You can User Media Query Like This Below Learn More about Media Query in w3schools.com

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
   }
}
@media only screen and (max-width: 1100px) {
  body {
    background-color: gray;
   }
}
user_123988910
Related