Skip to main content

Heights, widths and re-size for SVG applets

These are experiments to set widths and heights for interactive applets, allowing for various size screens. It also tries to cope intelligently with screen re-size.

Best square - (max 450px w×h)

Don't use class="square" (set height of SVG and thus div by javascript).

.max_w_450{margin:0 auto;width:100%;max-width:450px;max-height:450px}
.vmin{margin:0 auto;max-width:calc(100vmin - 1em)}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .vmin{max-width:100%}
}

Best rectangle (75% wide, max 450px high)

This is the best rectangle, responding to browser height and width. Uses max_w75pc_h450, but DON'T use ht100pc:

.max_w75pc{margin:0 auto;max-width:75%}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w75pc{max-width:100%}
}

Best empty square

This is the best (empty) square, responding to browser height and width. Uses max_w_450, vmin, square:

/* same as best square, PLUS .square **/

.max_w_450{margin:0 auto;width:100%;max-width:450px;max-height:450px}
.vmin{margin:0 auto;max-width:calc(100vmin - 1em)}
.square{
	box-sizing:border-box;
	width:100%;
	padding-bottom:100%;
}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .vmin{max-width:100%}
}

Best empty rectangle

This is the best (empty) rectangle, responding to browser height and width. Uses max_w75pc_h450, ht100pc:

/****** BEST EMPTY RECTANGLE - max width 75%; 1.288 ratio*****/

.max_w75pc_h450{margin:0 auto 2em;max-width:75%;height:75vh;max-height:450px}
.ht100pc{height:100%}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w75pc_h450{max-width:100%}
}
@media screen and (max-height: 510px) {
  .max_w75pc_h450{height:calc(100vh - 3em)}
}
max_w75pc_h450, ht100pc: best rectangle

Fail: max width 450 square

max_w_450 too high for phone landscape
bleeds over following text

Fail: Fill the screen

maxWidthHt, ht100pc (fill screen, but too big for desktop)

Fail: max width 75%

max_w_h_75pc, ht100pc: too high for desktop
/*********** FAILS *********************/

.maxWidthHt{width:100%;margin-bottom:2em;max-width:calc(100vw - 3em);height:calc(100vh - 3em)}
.max_w_h_75pc{margin:0 auto 2em;max-width:75%;height:75vh}
.interactive svg{box-sizing:border-box}


.vminEmpty{max-height:calc(100vmin - 3em);margin-bottom:2em}

@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w_h_75pc{max-width:100%;height:75vh}
  .max_w75pc_h450{max-width:100%}
  .max_w75pc{max-width:100%}
  .vmin{max-width:100%}
  .maxWidthHt{max-width:100%}
}
@media screen and (max-height: 510px) {
  .max_w75pc_h450{height:calc(100vh - 3em)}
}
/*****************************************/

top

Search IntMath, blog and Forum

Search IntMath

Online Math Solver

This math solver can solve a wide range of math problems.

Math Lessons on DVD

Math videos by MathTutorDVD.com

Easy to understand math lessons on DVD. See samples before you commit.

More info: Math videos

The IntMath Newsletter

Sign up for the free IntMath Newsletter. Get math study tips, information, news and updates each fortnight. Join thousands of satisfied students, teachers and parents!


See the Interactive Mathematics spam guarantee.