2016-12-13 3 views
1

Я ничего не нашел на форуме, этот вопрос может быть глупым, но я новичок. Я пытаюсь сделать «кнопку», когда я нажимаю на нее, что-то происходит. Но это не проблема. Я не знаю, как держать кнопку в центре страницы с любым увеличением, на ПК и на мобильном устройстве. Я думал использовать образ, но я все равно хочу спросить, как это сделать, если мне это нужно.Держите те же размеры с разными зонами

  • код прост, но есть две проблемы, я не знаю, как исправить: Когда я увеличивать или уменьшать масштаб, коробка остается тем же, но изменения размера шрифта . Я не знаю, как сделать его статичным;
  • на мобильном телефоне, все неправильно размещены, я серьезно не знаю, что делать

\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>

+0

Кнопка масштабирования в браузерах предназначена для изменения макета страницы. Если размер шрифта не увеличивается, масштабирование не имеет значения, не так ли? – Randy

+0

Да, но если я создаю статическую коробку, текст продолжает выходить за пределы div –

+0

Нравится? https://jsfiddle.net/oqxpz4dq/ – pol

ответ

0

Чистый метод CSS

Я не уверен, если это сделает трюк для вас, но я разрабатываю онлайн-дизайнеров, которые должны держать все отзывчивыми и на месте. Обычно такие вещи, как изображения, вообще не представляют проблемы, поскольку я устанавливаю контейнер на 100%, а все слои над ним получают ширину и высоту в% по шкале отлично.

Текст с другой стороны не так прост, но может быть выполнен довольно легко.

То, что я делаю, вместо использования px, pt, em или rem просто используется vw.

vw: сотые доли ширины экрана просмотра. vh: сотые доли окна просмотра высота. vmin: сотые доли в зависимости от того, что меньше, ширина окна просмотра или высота. vmax: сотые доли в зависимости от того, что больше, область просмотра ширина или высота.

Это в основном делает его отзывчивым, и каждый 1vw составляет 1% от ширины видового экрана. В зависимости от потребностей вам может понадобиться создать код @media для разных точек разрыва. .

Дополнительный JS метод (если применимо) Отличный плагин для изменения размера всего текста: http://simplefocus.com/flowtype/

Примечание: Я не связан с simplefocus.

Смежные вопросы