Уменьшить страницу CSS

У меня есть веб-сайт, который отлично работает, когда я уменьшить масштаб моего браузера до 50%. Но на нормальных размерах очень плохо (100%). Я уже использую преобразование и масштабирование CSS, но не то, что мне нужно CSS. По какой-то причине я не могу уменьшить шрифт или изображение. Все, что я хочу, это просто сделать эту страницу похожей на то, что я уменьшил масштаб браузера на 50%.

Спасибо за вашу помощь.

 <style type = "text/css">
  .navbar-brand{

    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
  }
  .navbar-toggle {
    z-index:3;
  }
  .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  .dropdown {
    position: relative;
    display: block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {background-color: #f1f1f1}

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
   @media (min-width: 1025px)  {

    html {
     /* -webkit-transform: scale(2);
      -moz-transform: scale(2);
      transform: scale(2);*/
     /* transform: scaleX(1) scaleY(.5);*/
   }

  }
  @media (max-width: 600px) {
   #judul{
    visibility: hidden;
    display: none
  }
  #menu{
    display: none;
  }
  #menu-content{
    display: block;
    position: relative;
  }

  #logo{
    visibility: hidden;
    display: none;
  }
 </style>

Разместите код, пожалуйста :)

— 20.07.2018 18:29

html css zooming

20.07.2018 18:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

12 087

Ответы 2

Для этого вы можете использовать решение без CSS:

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">

Область просмотра

Но вы действительно можете использовать CSS для увеличения (но я не рекомендую это для всей страницы):

/* you can apply this on body aswell */
.zoomedElement {
  background-color: #CCF;
  zoom: 300%;
}

.scaledElement {
background-color: #FAC;
  transform: scale(1.2); /* scales in all directions, probably not what you want but worth mentioning */
}

<div class = "zoomedElement">
  <h6>Heading Zoomed</h6>
  Some text...
</div>

<div class = "scaledElement">
  <h6>Heading Scaled</h6>
  Some text...
</div>

20.07.2018 19:18

Вы можете эффективно выполнить рендеринг с увеличением 50%, установив width / height тела на 200%, но в масштабе 50% с transform. Вам также необходимо установить transform-origin на top left, чтобы преобразование scale не сдвигало верхний левый угол тела от верхнего левого угла окна.

Это можно использовать для произвольных уровней масштабирования, просто используя эту пропорцию для scale и обратную пропорцию для width / height.

body {
  width: 200%;
  height: 200%;
  transform-origin: top left;
  transform: scale(50%);
}

18.03.2021 15:36

Другие вопросы по теме

Div ориентирован на рабочий стол, а не на мобильное устройство

Скрыть / показать контент на всех идентификаторах div с одним и тем же классом

Получить в SCSS Mixin внутри @each vars из следующего входа в массив

Изменение границы кнопки, когда она активна

Как понять различные типы значений, упомянутые в спецификации CSS?

Bootstrap: свернуть другие при раскрытии одного

Синтаксическая ошибка псевдоэлемента в коде VS

Как добавить границу к выбранному пункту меню в ASP.net

Используйте тот же именованный класс из другого файла css

Наведение курсора мыши на пузырек JQuery / CSS

Уменьшить страницу CSS

Ответы 2

Другие вопросы по теме

Похожие вопросы