All geek questions in one place

How to scale the size of elements in my HTML according to screen size?

I want to scale the size of the elements in my title as the screen is scaled or reduced. How can this be done? Here is my html:

    <!DOCTYPE html>
    <html>
      <head>
        <title>myWebpage</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

        <link href="main.css" rel="stylesheet" type="text/css">
      </head>

      <body>
          <header>
            <h1>Hello!</h1>
            <p>Welcome<br>Make Yourself at Home</p>
          </header>
     </body>
   </html>

and here is my css:

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}

/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/webassets/apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;


}
h1 {
  color: honeydew;
  font-size: 50px;
  font-family: "Helvetica Neue";

}
p {
  color: honeydew;
  font-size: 30px;
  font-family: "Helvetica Neue-Thin", sans-serif;
}

Here is my full screen page: enter image description here

& here it is reduced to the smallest window: enter image description here enter image description here

As you can see, I need text to scale, like my background .. how to do it?

+4
source share
5 answers

Use vwfor font-size.

h1{
 font-size : 7.5vw;
}

p{
 font-size : 2vw;
}

Demo is here.

+2
source

, px. , . , em, rem, vw.

, , px vw, .

+2

CSS3 : -

.text {
font-size:15px;
}

@media (max-width:730px){
font-size:5px;
}
+2

-, 100% css. Bootstrap, , .

+1

.

:

@media (max-width:400px){
  h1{
    font-size: 10em;
  }
}

, ​​ . , :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

: http://getbootstrap.com/css/

+1

Source: https://habr.com/ru/post/1627616/

More articles:


All Articles