Nano Hash - криптовалюты, майнинг, программирование

Как свернуть левый отступ или поле в макете адаптивного дизайна?

ПРОБЛЕМА:

В настоящее время я работаю над шаблоном from-pdf; Я относительно новичок в адаптивном дизайне, и у меня возникла проблема со следующим: у меня есть кнопка внизу страницы, которую я сейчас центрирую, используя заданное значение левого поля. Однако это предотвращает «плавание» этой кнопки влево во время изменения размера экрана.

ЦЕЛЬ:

Имейте решение, которое позволяет центрировать кнопку по горизонтали в «полноразмерном» браузере, но сворачивать и плавать до упора влево, когда размер браузера уменьшается.

ПЫТАЛСЯ:

  • Настройка отступов/поля
  • Установка обоих вышеперечисленных параметров на автоматический
  • Мысль об ужасном концептуальном хаке гетто (технически я мог бы сделать изображение длинным белым прямоугольником с кнопкой в ​​центре, а затем сделать изображение плавным, таким образом изменяя размер)

ВЕБ-САЙТ В ОПРОСЕ (ОБЪЕКТ: ОРАНЖЕВАЯ КНОПКА У НИЖНЕГО ЛИШНЯ):

http://thedma.org/the-state-of-data/

padding css margin
04.11.2014

  • В общем, не размещайте ссылки на веб-сайты, чтобы люди могли посмотреть ваш код. После того, как это будет исправлено, будущие искатели вопросов не смогут увидеть, в чем была проблема, и, следовательно, имеет ли отношение к ним выбранный ответ. 04.11.2014
  • Я не размещал веб-сайт для того, чтобы люди смотрели на мой код, я разместил его, чтобы они могли визуально увидеть проблему, но суть принята. 05.11.2014
  • Почему я получил -1? 10.11.2014
  • Не совсем уверен; однако у них много вопросов относительно медиа-запросов в stackoverflow. 11.11.2014

Ответы:


1

Вы хотите использовать медиа-запросы для этого. В частности, viewport-height или viewport-width от звуков вещей.

Ссылка на документацию.

Основная идея:

@media (max-height: 600px) {
    .bottom-button {
        /* styles */
    }
}
@media (min-height: 600px) {
    .bottom-button {
        /* different styles */
    }
}
04.11.2014

2

Вот вам работающая скрипта.

Хитрость заключается в следующем:

a {
    display: block;
   text-align: center;
}
img {
    max-width: 100%;
}

предполагая, что a выбирает ссылку, соответствующую кнопке, а img — это ваше изображение.

04.11.2014
  • Это отличный трюк, Le_Morri, но я не уверен, что он сработает, если элемент не находится внутри ссылки. Спасибо за решение, относящееся к этой ситуации, так как оно отлично работает в разных браузерах. 05.11.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..