為什么在縮放HTML頁面時畫布會向下移動？
[英]Why does the canvas move down when I scale HTML page?
問題描述
我有兩種不同屏幕寬度的樣式。 當我的屏幕大或小 - 一切都好。 當我的屏幕在中間時 - 畫布向下移動。 我該如何解決？ 我嘗試使用百分比，但它沒有解決我的問題。
@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
我為沒有找到導致此問題的代碼的直接問題而道歉，但我找到了一個快速的解決方法。 現在，我建議在媒體查詢中指定一個像素寬度（而不是使用@media（orientation：landscape）。這將顯示更寬一點的#LITTLEmenu並避免顯示#BIGmenu時遇到問題的中畫面寬度。
所以，而不是@media（方向：橫向），嘗試：
@media screen and (min-width: 776px) { /*большой*/
#LITTLEmenu {display:none} ...
而不是@media（方向：肖像），嘗試：
@media screen and (max-width: 775px) { /*маленький*/
#BIGmenu {display:none} ...
您可以嘗試不同的像素數量，直到找到您喜歡的寬度，這不會導致畫布被按下。 我上面使用的寬度只是我可以做的最窄的媒體查詢，而不會導致畫面在屏幕中等寬度時向下移動： https ： //jsfiddle.net/KyleVassella/Ldfjztsf/
您還需要在HTML中添加新標記（位於第一個元標記下方），以確保Iphone，Ipads等能夠檢測到這些媒體查詢：
HTML： <meta name="viewport" content="width=device-width, initial-scale=1.0">
為什么縮小窗口時彩色背景不能完全覆蓋我的頁面？
[英]Why does the colorful background not cover my page completely when I scale down the window?
當我嘗試使用 jQuery UI 隱藏它時，為什么 div 在滑動之前會向下移動？
[英]Why does the div move down before sliding when I try to hide it with jQuery UI?
為什么在canvas上繪制很多元素時頁面開始卡頓？
[英]Why does the page start to lag when drawing many elements on the canvas?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.