Rem: Relative unit

Font size refers to the unit of font size relative to the root element (HTML). Applies to any unit of set length.

font-size : 10px ; 1 rem = 10 px; p{font-size:10px; font-size:1rem; }Copy the code

Js to get the device width

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name='viewport' The content = "width = device - width, height = device - height, initial - scale = 1.0, the minimum - scale = 1.0, maximum - scale = 1.0, user-scalable=no" /> <style> div p{background: red; margin-bottom:20px; height:5rem; } HTML {font-size:60px} </style> </head> <body> <div> <p style='font-size:0.2rem'>0.2rem</p> <p Style = 'the font - size: 0.4 em > 0.4 rem < / p > < p style = "the font - size: 0.6 rem > 0.6 rem < / p > < p style =" font, size: 0.8 rem' > 0.8 rem < / p > < p style='font-size:1rem'>1rem</p> <p style='font-size:2rem'>2rem</p> <p style='font-size:3rem'>3rem</p> </div> </body> <script> function resize(){ document.documentElement.style.setProperty('font-size', (document.documentElement.clientWidth/6) + 'px') } window.onresize = resize resize() </script> </html>Copy the code