Skip to content

Instantly share code, notes, and snippets.

@HereIsJade

HereIsJade/index.html

Created August 8, 2018 17:36
Show Gist options
  • Save HereIsJade/3fa1fb0cd1fd7f331a05be6f490d0f14 to your computer and use it in GitHub Desktop.
Save HereIsJade/3fa1fb0cd1fd7f331a05be6f490d0f14 to your computer and use it in GitHub Desktop.
Download ZIP
Mobile // source http://jsbin.com/sufowov
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dynamic mobile resizing with rem units</title>
<script>
let pageWidth = window.innerWidth;
document.write(`<style>html{font-size: ${pageWidth}px;}</style>`)
</script>
<style id="jsbin-css">
*{
margin:0;padding:0;
}
body{
font-size:16px;
}
.parent{
display:flex;
flex-wrap:wrap;
}
.child{
background:#ddd;
width:0.4rem;
text-align: center;
line-height:0.3rem;
height:0.3rem;
margin:0.05rem;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">box</div>
<div class="child">box</div>
<div class="child">box</div>
<div class="child">box</div>
</div>
<script id="jsbin-source-css" type="text/css">*{
margin:0;padding:0;
}
body{
font-size:16px;
}
.parent{
display:flex;
flex-wrap:wrap;
}
.child{
background:#ddd;
width:0.4rem;
text-align: center;
line-height:0.3rem;
height:0.3rem;
margin:0.05rem;
}</script>
</body>
</html>
Raw
jsbin.sufowov.css
*{
margin:0;padding:0;
}
body{
font-size:16px;
}
.parent{
display:flex;
flex-wrap:wrap;
}
.child{
background:#ddd;
width:0.4rem;
text-align: center;
line-height:0.3rem;
height:0.3rem;
margin:0.05rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment