保持相同的尺寸与不同的缩放

我还没有在论坛上发现任何内容，但可能是愚蠢的，但我是一个新手。我试图做一个“按钮”，当我点击它时，会发生一些事情。但这不是问题。我不知道如何将按钮保持在页面的中心位置，在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

保持相同的尺寸与不同的缩放

回答

相关问题