Skip to content

Instantly share code, notes, and snippets.

@davidmason

davidmason/monitor-sizes.html

Created September 27, 2016 00:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidmason/ab41dffca2691f28a374fa1de7182f04 to your computer and use it in GitHub Desktop.
Save davidmason/ab41dffca2691f28a374fa1de7182f04 to your computer and use it in GitHub Desktop.
Download ZIP
Visualize a few different screen sizes, to help me decide on a laptop display size.
Raw
monitor-sizes.html
<!DOCTYPE html>
<html>
<head>
<!-- Useful screen size calculators: http://www.silisoftware.com/tools/screen.php -->
<style type="text/css">
body {
display: flex;
align-items:center;
justify-content: center;
}
.container {
display: flex;
align-items:center;
justify-content: center;
background-color: rgba(128, 128, 150, 0.3);
overflow: visible;
/* To allow absolute positioning of labels */
position: relative;
}
.label {
position: absolute;
top: 0.125in;
left: 0.125in;
}
/* My big 16:9 monitor at home */
.screen28 {
width: 24.40in;
height: 13.73in;
}
/* My 16:10 monitors at work */
.screen24 {
width: 20.35in;
height: 12.72in;
}
/* My smaller 16:9 monitor at home */
.screen23 {
width: 20.05in;
height: 11.27in;
}
/* Larger laptop screens */
.screen17 {
width: 14.82in;
height: 8.33in;
}
/* Laptop screen size I am considering */
.screen15dot6 {
width: 13.60in;
height: 7.65in;
}
/* My work laptop screen */
.screen14 {
width: 12.2in;
height: 6.86in;
}
</style>
</head>
<body>
<div class="container screen28">
<span class="label">28" monitor</span>
<div class="container screen24">
<span class="label">24" 16:10 monitor</span>
<div class="container screen23">
<span class="label">23" monitor</span>
<div class="container screen17">
<span class="label">17" monitor</span>
<div class="container screen15dot6">
<span class="label">15.6" monitor</span>
<div class="container screen14">
<span class="label">14" monitor</span>
</div>
</div>
</div>
</div>
<div>
<div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment