保持相同的尺寸與不同的縮放

我還沒有在論壇上發現任何內容，但可能是愚蠢的，但我是一個新手。我試圖做一個「按鈕」，當我點擊它時，會發生一些事情。但這不是問題。我不知道如何將按鈕保持在頁面的中心位置，在PC上和移動設備上進行任何縮放。我想使用一個圖像，但我想問問如何做到這一點，如果我需要它。保持相同的尺寸與不同的縮放

代碼很簡單，但有兩個問題，我不知道如何解決：當我放大或縮小，盒子保持不變，但字體大小變化。我不知道如何使它變成靜態的;
在移動設備上，一切都錯了放置，我嚴重不知道該怎麼辦

\t \t \t #div{ 
 
\t \t \t \t height:10%; 
 
\t \t \t \t width:50%; 
 
\t \t \t \t border:0.01em solid black; 
 
\t \t \t \t background-color:lightblue; 
 
\t \t \t \t border-radius:500em; 
 
\t \t \t \t position:absolute; 
 
\t \t \t \t left:25%; 
 
\t \t \t \t top:45%; 
 
\t \t \t } 
 

 
\t \t \t #p{ 
 
\t \t \t \t text-align:center; 
 
\t \t \t \t margin:0px; 
 
\t \t \t \t position:relative; 
 
\t \t \t \t height:50%; 
 
\t \t \t \t top:25%; 
 
       /*not sure if this is how to center the text*/ 
 
\t \t \t \t \t \t 
 
\t \t \t \t font-size:1em; /*not sure*/ 
 
\t \t \t }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Bottone inutile</title> 
 
\t \t <script> 
 
      /*...*/ 
 
\t \t </script> 
 
\t \t <style> 
 
      /*...*/ 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="div" onclick="something()"> 
 
\t \t \t <p id="p">text</p> 
 
\t \t </div> 
 
\t </body> 
 
</html>

來源

2016-12-13 Sir Vava

瀏覽器上的縮放按鈕旨在改變頁面的佈局。如果字體大小不增加，縮放是無關緊要的，不是嗎？ – Randy

是的，但如果我製作一個靜態框，文本繼續在div的外面 –

像那樣？ https://jsfiddle.net/oqxpz4dq/ – pol

純CSS方法

我不知道，如果這將爲你做訣竅，但我開發的在線設計師必須保持一切響應和到位。像圖像這樣的東西通常沒有任何問題，因爲我將容器設置爲100％，並且所有圖層上方的寬度和高度均爲％，以完美縮放。

另一方面，文本不是那麼容易，但可以很容易地完成。

我所做的是不是使用px，pt，em或rem而是簡單地使用vw。

vw：視口寬度的百分之一。 vh：視口高度的百分之一。 vmin：百分之一較小者，視口寬度或高度。 vmax：百分之一的較大值，寬度或高度的視口。

這基本上使它響應，每個1vw是視口寬度的1％。根據需要，您可能需要爲不同的中斷點創建一些@media代碼。。

可選JS方法（如適用）一個偉大的插件來調整所有的文字：http://simplefocus.com/flowtype/

注：我不與simplefocus無關。

來源

2016-12-13 21:07:33

保持相同的尺寸與不同的縮放

回答

相關問題