为什么在缩放HTML页面时画布会向下移动？
[英]Why does the canvas move down when I scale HTML page?
问题描述
I have two styles for different screen widths. 
我有两种不同屏幕宽度的样式。 When my screen is large or small - all is OK. 当我的屏幕大或小 - 一切都好。 When my screen is middle - the canvas moves down. 当我的屏幕在中间时 - 画布向下移动。 How can I fix it? 我该如何解决？ I try to use percents, but it did not fix my problem. 我尝试使用百分比，但它没有解决我的问题。
@media (orientation:landscape) { /*большой*/ #LITTLEmenu {display:none} body { background: #333333; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } table {border-spacing: 7px 11px; border:0px; } td { padding: 10px; border-radius: 20px; cursor: pointer; text-decoration: none; color: #ffffff; background-color: #0095ff; border: 0px solid #0095ff; } a { white-space: nowrap; display: block; width: 100%; height: 100%; text-decoration: none; vertical-align: middle; text-align: center; color: #ffffff; font-size: 2vw; } canvas{ color: #E44CE4; background-color: #1DAB1D; float: left; width: 67%; height: 67%; margin: 1%; border-radius: 10px; border: 0px solid #B13032; } #TOPmenu{width: 100%;} #Lmenu{width: 12%; float:left; margin: 1%;} #Rmenu{ width: 12%; float: right; margin: 1%; } #menu{white-space: nowrap; width: 100%; } } @media (orientation:portrait) { /*маленький*/ #BIGmenu {display:none} body { background: #333333; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } table {border-spacing: 7px 11px; border:0px; } td { padding: 10px; border-radius: 20px; cursor: pointer; text-decoration: none; color: #ffffff; background-color: #0095ff; border: 0px solid #0095ff; } a { white-space: nowrap; display: block; width: 100%; height: 100%; text-decoration: none; vertical-align: middle; text-align: center; color: #ffffff; font-size: 4vw; } canvas{ color: #E44CE4; background-color: #1DAB1D; float: left; width: 99%; height: 100%; margin: 1%; border-radius: 10px; border: 0px solid #B13032; } #Smallmenu{white-space: nowrap; width: 100%;} } }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="unico.css" /> </head> <body> <div id="BIGmenu"> <table id="TOPmenu" width="500"> <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> <td><a href="3">ссылка 3</a></td> <td><a href="4">ссылка 4</a></td> </tr> </table> <div id="menu"> <table id="Lmenu" width="500"> <tr> <tr><td><a href="1">ссылка 5</a></td></tr> <tr><td><a href="2">ссылка 6</a></td></tr> <tr><td><a href="3">ссылка 7</a></td></tr> <tr><td><a href="4">ссылка 8</a></td></tr> </tr> </table> <table id="Rmenu" width="500"> <tr> <tr><td><a href="1">ссылка 9</a></td></tr> <tr><td><a href="2">ссылка 10</a></td></tr> <tr><td><a href="3">ссылка 11</a></td></tr> <tr><td><a href="4">ссылка 12</a></td></tr> </tr> </table> </div> </div> <div id="LITTLEmenu"> <table id="Smallmenu" > <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> <td><a href="3">ссылка 3</a></td> </tr> </table> <table id="Smallmenu" > <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> <td><a href="3">ссылка 3</a></td> </tr> </table> <table id="Smallmenu" > <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> </tr> </table> <table id="Smallmenu" > <tr> <td><a href="1">ссылка 1</a></td> <td><a href="2">ссылка 2</a></td> </tr> </table> </div> <canvas id="canvas" width="500" height="500" ></canvas> </body> </html>
1 个解决方案
解决方案1
0 2016-12-05 14:25:52
I apologize for not finding the direct problem with your code that is causing this, but I have found a quick workaround. 我为没有找到导致此问题的代码的直接问题而道歉，但我找到了一个快速的解决方法。 For now, I suggest specifying a pixel width in your media query (rather than using @media (orientation:landscape). This will display #LITTLEmenu a little wider and avoid the medium screen width where you're having problems displaying #BIGmenu. 现在，我建议在媒体查询中指定一个像素宽度（而不是使用@media（orientation：landscape）。这将显示更宽一点的#LITTLEmenu并避免显示#BIGmenu时遇到问题的中画面宽度。
So instead of @media (orientation:landscape), try: 所以，而不是@media（方向：横向），尝试：
@media screen and (min-width: 776px) { /*большой*/
#LITTLEmenu {display:none} ...
And instead of @media (orientation:portrait), try: 而不是@media（方向：肖像），尝试：
@media screen and (max-width: 775px) { /*маленький*/
#BIGmenu {display:none} ...
You can try different pixel amounts for each until you find a width that you like which does not cause the canvas to be pushed down. 您可以尝试不同的像素数量，直到找到您喜欢的宽度，这不会导致画布被按下。 The widths I used above are just about the narrowest media queries I could do without causing the canvas to move down when the screen is at a medium width: https://jsfiddle.net/KyleVassella/Ldfjztsf/ 我上面使用的宽度只是我可以做的最窄的媒体查询，而不会导致画面在屏幕中等宽度时向下移动： https ： //jsfiddle.net/KyleVassella/Ldfjztsf/
You'll also want to include a new tag in your HTML (just below your first meta tag) to ensure that Iphones, Ipads, etc are able to detect these media queries: 您还需要在HTML中添加新标记（位于第一个元标记下方），以确保Iphone，Ipads等能够检测到这些媒体查询：
HTML: <meta name="viewport" content="width=device-width, initial-scale=1.0"> HTML： <meta name="viewport" content="width=device-width, initial-scale=1.0">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.