CODEWITHSUNDEEP
htmlcsstextscalingelement
Mike Strong
Mike Strong

Reputation: 940

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

I want to scale the size of the elements within my header as the screen scales down or up in size. 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 fullscreen page: enter image description here

& here it is scaled down to the smallest window: enter image description hereenter image description here

As you can see, i need the text to scale as my background did.. how do i accomplish this?

Upvotes: 5

Views: 32747

Answers (5)

Neptulon
Neptulon

Reputation: 41

You can use CSS3 Media Queries for you purpose :-

.text {
font-size:15px;
}

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

Upvotes: 3

Tyler H
Tyler H

Reputation: 99

One of the more common ways of doing this would be a media screen.

Example:

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

Another possible way would be to use an existing mobile responsive framework such as bootstrap. To incorporate bootstrap into your page, add this stylesheet link to the top of your page:

<!-- 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">

Read more about the bootstrap documentation here: http://getbootstrap.com/css/

Upvotes: 2

Arjun
Arjun

Reputation: 1355

Use vw for font-size.

h1{
 font-size : 7.5vw;
}

p{
 font-size : 2vw;
}

Demo is here.

Upvotes: 3

Daniel Higueras
Daniel Higueras

Reputation: 2404

To scale text, you don't have to use fixed px sizes. You are better of using relative sizes, which vary in relation to the viewport or screen size. There are several options like em, rem, vw.

In this example you can see how, by changing the px to vw, the text becomes responsive in relation to the viewport.

Upvotes: 2

digitai
digitai

Reputation: 1842

You should use media queries, grid layout and image class sized to 100% on your css. I recommend you to use Bootstrap, a free library widely used to crete fully responsive experiences with no much hassle.

Upvotes: 1

Related Questions