How to set a maximum line length for every screen size?

You can handle media queries via your CSS. Have a look at any of the Twenty * series of themes and you’ll see CSS blovks like:

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.www.ads-software.com/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
	}

If you want measurements that are tied to line lengths then you should use rem. A rem is a fixed equivalent of an em, which is itself based on the width of a capital M (you can use em but in CSS that has problems with inheritance, which is why rem was introduced).

So, a container with width: 45rem; should be roughly equivalent to 45 characters (although not exactly, as most fonts have proportional character widths).

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/