How to Change Text (Not Font Size) According to Screen Size in CSS

How to change text (not font size) according to screen size in CSS?

Have 2 spans with full and short strings, then when below target resolution, swap between them using a media query:

HTML

<span class="full-text">Saturday</span>
<span class="short-text">Sat</span>

CSS

// Hide short text by default (resolution > 1200px)
.short-text { display: none; }

// When resolution <= 1200px, hide full text and show short text
@media (max-width: 1200px) {
    .short-text { display: inline-block; }
    .full-text { display: none; }
}

Replace 1200px with your target resolution breakpoint.

my text is not adjusting with screen size

If you don't need browser support below IE 11, I would probably use vw for the font size. Give the .text div font-size: 11vw; and .sub-text: 4vw; or adjust it as needed. The space between the two divs will probably need to be adjust at different screen widths but the font size will adjust.

/*This is for links*/a{text-decoration: none;color: Black;}
div#sub{display: inline;color: #339900;}
body {margin:0;}
/*This is for navigation*/.topnav {  overflow: hidden;  background-color: #4caf50;}
.topnav a {
  float: left;  color: black;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}
.topnav a:hover {  background-color: #666666;  color: white;}
.topnav a.active {  background-color: white;  color: black;}
 /*This is the end*/
/*This is for parallax scrolling*/body, html {    height: 100%;}
.parallax {    /* The image used */    background-image: url('http://letsavepet.com/images/20170122_150254.jpg');
    /* Full height */    height: 100%;
    /* Create the parallax scrolling effect */    background-attachment: fixed;    background-position: center;    background-repeat: no-repeat;    background-size: cover;}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */@media only screen and (max-device-width: 1024px) {    .parallax {        background-attachment: scroll;    }}/*This is the end*/

/*This is for header*/body {  margin: 0;  font-family: Arial;}
.top-container {  background-color: white;  padding: 0px;  text-align: left;}
.content {  padding-top: 14px;}
.header {  padding: 0px 0px;  background: #4caf50;  color: #4caf50;  z-index:100;}
.sticky {  position: fixed;  top: 0;  width: 100%;}
.sticky + .content {  padding-top: 64px;}/*This is the end*/
/*This is for text*/ .text {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    color: white;    font-size: 11vw;}
.sub-text{ position: absolute;    top: 63%;    left: 50%;    transform: translate(-50%, -50%);    color: white;    font-size: 4vw;    font-family: apple chancery;}
 /*This is for footer*/ .footer {    background-color: #0b0c0c;    padding: 10px;    color: white;    padding-top: 70px;    padding-bottom: 100px;    padding-left: 40px;}
 .footer_2{background-color: #1e1f21; padding-top: 20px; padding-bottom: 30px; color: white; }
 div#info{ color: #9fa1a3;}

 .copy_reg{float:right; display: inline-block; padding-right: 10px; }
 /*This is for media buttons*/ .fa {  padding: 6px;  font-size: 5px;  text-align: center;  text-decoration: none;  margin: 5px 5px;}
.fa:hover {    opacity: 0.7;}
.fa-facebook {  background: #3B5998;  color: white;}
 .media{font-size: 20px;   padding-right: 60px;   float: right;   display: inline-block;}

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Lets Save Pets</title><link rel="stylesheet" href="index.css" type="text/css" /><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body style=background:white>
<div class="header" id="myHeader">
<div class="topnav" id="myTopnav">  <a href="index.html" class="active">Home</a>  <a href="news.html">News</a>  <a href="gallery.html">Gallery</a>  <a href="joinus.html">Join Us</a>  <a href="aboutus.html">About</a>  </div>
</div>
<div class="text"><b>LETS SAVE PETS</b></div><div class="sub-text"><b>We need you in this mission!</b></div>
<div class="parallax"></div>
<div class="content" style="background-color:white;">
<h1><u>Saving a life is easier than you think.</u></h1><p><font size="5">“You can do it!” Every day, we say those four magical words to people around the globe whowant to help animals in need but are unsure of their abilities. With some friendly encouragementand guidance, you’ll be amazed at what you can accomplish.
<h2>Helping to save animals</h2>
Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s justwhat it is going to take — every person reading this article committing to do just a little bit toreach this goal. Sure, many of us think we can’t make a difference for one reason or another, butthe truth is that no matter how little time, money or experience you have, you can still savean animal’s life. It’s easier than you think, and makes you feel good, too.<br /> <br />We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell youabout simple ways that you can make a huge impact. It’s time to do all we can to save the lives ofhomeless animals. They’re counting on us — and we know <b>you can do it!</b></font></p></div>
<div class="footer"><div class="media">FIND US ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div>CONTACT INFO<br /><br /><div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br /><i class="material-icons">local_post_office</i> letsavepet@gmail.com<br /><br /><i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br />Balbir Nagar Ext., Shahdara,<br />Delhi-110032, India</div></div>
<div class="footer_2">   © Letsavepet<div class="copy_reg">All Rights Reserved®</div></div>

<script>function myFunction() {    var x = document.getElementById("myTopnav");    if (x.className === "topnav") {        x.className += " responsive";    } else {        x.className = "topnav";    }}
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");var sticky = header.offsetTop;
function myFunction() {  if (window.pageYOffset >= sticky) {    header.classList.add("sticky");  } else {    header.classList.remove("sticky");  }}</script>
</body></html>

Font size relative to the user's screen resolution?

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.

Resize text acording to screen size

You could use the new css units vw,vh (viewport width/height) for this.

Here's an interesting css-tricks article which shows you how to use them for typography.

Example: (from above article)

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

So h1 will have font-size 5.9% of the viewport width. etc.

That being said, using viewport units for font-size in the above way is problematic because when the viewport width is very narrow - then the rendered font size will become too small and vice-versa.

In order to overcome this problem, I can recommend using a technique called Fluid Type AKA CSS Locks.

A CSS lock is a specific kind of CSS value calculation where:

there is a minimum value and a maximum value,

and two breakpoints (usually based on the viewport width),

and between those breakpoints, the actual value goes linearly from the minimum to the maximum.

(From this article on CSS locks which also explains the math involved in great detail.)

So let's say we want to apply the above technique such that the minimum font-size is 16px at a viewport width of 600px or less, and will increase linearly until it reaches a maximum of 32px at a viewport width of 1200px.

We could use this SASS mixin which does all of the math for us so that the CSS would look something like this:

div {
  /* linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px  */
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

// ----// libsass (v3.3.6)// ----
// =========================================================================////  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS//  ---------------------------------------------------//  Indrek Paas @indrekpaas////  Inspired by Mike Riethmuller's Precise control over responsive typography//  http://madebymike.com.au/writing/precise-control-responsive-typography/////  `strip-unit()` function by Hugo Giraudel//  //  11.08.2016 Remove redundant `&` self-reference//  31.03.2016 Remove redundant parenthesis from output//  02.10.2015 Add support for multiple properties//  24.04.2015 Initial release//// =========================================================================
@function strip-unit($value) {  @return $value / ($value * 0 + 1);}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {  @each $property in $properties {    #{$property}: $min-value;  }
  @media screen and (min-width: $min-vw) {    @each $property in $properties {      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});    }  }
  @media screen and (min-width: $max-vw) {    @each $property in $properties {      #{$property}: $max-value;    }  }}
// Usage:// ======
// /* Single property */// html {//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);// }
// /* Multiple properties with same values */// h1 {//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);// }
////////////////////////////////////////////////////////////////////////////
div {  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);}@media screen and (max-width: 600px) {  div {     font-size: 16px;  }}@media screen and (min-width: 1200px) {  div {     font-size: 36px;  }}

<div>Responsive Typography technique known as Fluid Type or CSS Locks.   Resize the browser window to see the effect.</div>

Font scaling based on size of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

vw (% of the viewport width)
vh (% of the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

Responsive font size in CSS

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.

Media Queries

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

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

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Again, from the same W3C document each individual unit can be defined as below:

vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

Change font size depending on resolution

Try to use this concept proof CSS:

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Working demo on jsFiddle

How to set the font of text relative to screen resolution

If you want it to resize according to the screen width, I'd suggest the vw unit.

Fiddle: https://jsfiddle.net/tey035zv/

How to Change Text (Not Font Size) According to Screen Size in CSS