fix resize

This commit is contained in:
YouWei Zhao 2018-07-09 14:31:18 +08:00
parent 0d39289df9
commit 2798c0cf58
3 changed files with 44 additions and 44 deletions

View File

@ -1,5 +1,5 @@
html{ html{
font-size: 4vmin; font-size: 4vw;
} }
input, textarea, select, button { input, textarea, select, button {
font-size: 1rem; font-size: 1rem;
@ -29,8 +29,8 @@ body {
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
background-color: #F5F5F5; background-color: #F5F5F5;
width: 100vmin; width: 100vw;
height: 100vmin; height: 100vw;
} }
#left { #left {
@ -84,14 +84,14 @@ body {
.map { .map {
position: absolute; position: absolute;
left: 4vmin; left: 4vw;
top: 4vmin; top: 4vw;
width: 96vmin; width: 96vw;
height: 96vmin; height: 96vw;
} }
.map canvas{ .map canvas{
width: 96vmin; width: 96vw;
height: 96vmin; height: 96vw;
} }
#mid .tools { #mid .tools {
@ -200,8 +200,8 @@ body {
#iconLib { #iconLib {
position: absolute; position: absolute;
width: 100vmin; width: 100vw;
height: 100vmin; height: 100vw;
left: 5px; left: 5px;
top: 5px; top: 5px;
overflow: auto; overflow: auto;
@ -249,7 +249,7 @@ body {
} }
td { td {
border: 0.230vmin solid #fff; border: 0.230vw solid #fff;
color: #fff; color: #fff;
cursor: crosshair; cursor: crosshair;
} }
@ -279,15 +279,15 @@ table.col td {
#mapColMark { #mapColMark {
top: 0; top: 0;
left: 4vmin; left: 4vw;
width: 96vmin; width: 96vw;
height: 4vmin; height: 4vw;
font-size: 3vmin; font-size: 3vw;
} }
#mapColMark td { #mapColMark td {
width: 7.15vmin; width: 7.15vw;
padding: 0; padding: 0;
border-bottom-width: 0px; border-bottom-width: 0px;
border-top-width: 0px; border-top-width: 0px;
@ -295,9 +295,9 @@ table.col td {
#mapColMark td:hover .colBlock { #mapColMark td:hover .colBlock {
position: absolute; position: absolute;
top: 4vmin; top: 4vw;
height: 96vmin; height: 96vw;
width: 7.15vmin; width: 7.15vw;
z-index: 100; z-index: 100;
background-color: rgba(38, 166, 154, .5); background-color: rgba(38, 166, 154, .5);
} }
@ -324,13 +324,13 @@ table.row td {
#mapRowMark { #mapRowMark {
top: 0; top: 0;
left: 0; left: 0;
width: 4vmin; width: 4vw;
height: 96vmin; height: 96vw;
font-size: 3vmin; font-size: 3vw;
} }
#mapRowMark td { #mapRowMark td {
height: 7.15vmin; height: 7.15vw;
padding: 0; padding: 0;
border-left-width: 0px; border-left-width: 0px;
border-right-width: 0px; border-right-width: 0px;
@ -338,9 +338,9 @@ table.row td {
#mapRowMark td:hover .rowBlock { #mapRowMark td:hover .rowBlock {
position: absolute; position: absolute;
left: 4vmin; left: 4vw;
height: 7.15vmin; height: 7.15vw;
width: 96vmin; width: 96vw;
z-index: 100; z-index: 100;
background-color: rgba(76, 34, 27, .5); background-color: rgba(76, 34, 27, .5);
} }
@ -352,7 +352,7 @@ table.row td {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
cursor: default; cursor: default;
font: normal 2.5vmin Arial, sans-serif; font: normal 2.5vw Arial, sans-serif;
margin: 0; margin: 0;
outline: none; outline: none;
padding: 4px 0; padding: 4px 0;
@ -366,7 +366,7 @@ table.row td {
} }
#midMenu .menuitem{ #midMenu .menuitem{
color: #000; color: #000;
font: normal 2.5vmin Arial, sans-serif; font: normal 2.5vw Arial, sans-serif;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 4px 7em 4px 28px; padding: 4px 7em 4px 28px;
@ -386,7 +386,7 @@ table.row td {
} }
#midMenu .menuitem-content{ #midMenu .menuitem-content{
color: #000; color: #000;
font: normal 2.5vmin Arial, sans-serif; font: normal 2.5vw Arial, sans-serif;
} }
/* for vue dom */ /* for vue dom */
@ -397,7 +397,7 @@ table.row td {
#down{ #down{
position: absolute; position: absolute;
left:0; left:0;
top:100vmin; top:100vw;
bottom: 0; bottom: 0;
width: 100vmin; width: 100vw;
} }

View File

@ -3,14 +3,14 @@
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
background-color: #F5F5F5; background-color: #F5F5F5;
width: 100vmin; width: 100vw;
height: 100vmin; height: 100vw;
} }
.leftTab { .leftTab {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
height: 100vmin; height: 100vw;
} }
.leftTab > * { .leftTab > * {
@ -28,7 +28,7 @@
.leftTab { .leftTab {
left: 0; left: 0;
top: 0; top: 0;
width: 100vmin; width: 100vw;
} }
.leftTab .leftTabHeader { .leftTab .leftTabHeader {
@ -59,15 +59,15 @@
overflow: hidden; overflow: hidden;
} }
#left6 h3{ #left6 h3{
font-size: 3.5vh; font-size: 6vw;
margin: 1vh 0; margin: 1.77vw 0;
} }
#left6 #blocklyArea { #left6 #blocklyArea {
width: 100vmin; width: 100vw;
height: 60vh; height: 100vw;
} }
#left6 #blocklyDiv { #left6 #blocklyDiv {
@ -77,7 +77,7 @@
#left6 .CodeMirror { #left6 .CodeMirror {
border: 1px solid #eee; border: 1px solid #eee;
height: 21vh; height: 38vw;
width: 100%; width: 100%;
} }
@ -88,10 +88,10 @@
} }
#left6 #blocklyDiv .blocklyToolboxDiv{ #left6 #blocklyDiv .blocklyToolboxDiv{
width:6vmin; width:6vw;
} }
#left6 #blocklyDiv .blocklyTreeLabel{ #left6 #blocklyDiv .blocklyTreeLabel{
margin-left:-4vmin; margin-left:-4vw;
} }
#left7 { #left7 {

View File

@ -250,7 +250,7 @@ var onresize = function(e) {
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px'; blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace); Blockly.svgResize(workspace);
}; };
window.addEventListener('resize', onresize, false); if(typeof editor !== "undefined" && !editor.isMobile)window.addEventListener('resize', onresize, false);
onresize(); onresize();
//Blockly.svgResize(workspace); //Blockly.svgResize(workspace);