h1 {

  font-size: 5.9vw;

}

h2 {

  font-size: 3.0vh;

}

p {

  font-size: 2vmin;

}

Viewport = size of the screen

​

Useful information to know for mobile phones:

 1. "width=device-width" is saying "Use the width of the actual device"

 2. "initial-scale=1" is saying "Dont zoom in or out"

In practice:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A page's description, usually one or two sentences." />

    <meta name="keywords" content="banana, banana facts" />

<!-- Responsive // Viewport -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

​

// viewport for Responsive Design

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/**

*https://github.com/barryvdh/laravel-ide-helper

*this plugin is your solution

*/

h1 {

  font-size: 5.9vw;

}

h2 {

  font-size: 3.0vh;

}

p {

  font-size: 2vmin;

}