Как масштабировать мой сайт на основе различной ширины экрана

Question

Я хотел бы изменить масштаб моего веб-сайта на 0,7 или аналогичный в зависимости от ширины используемого устройства.

Единственная полезная информация я мог найти до сих пор следующие <meta> тег:

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

мне было интересно, если это возможно, чтобы написать код, как показано ниже, чтобы применить определенный масштаб веб-сайта только если ширина устройства соответствует определенному диапазону ширины или ширины:

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .body { 
    initial-scale: 0.7; 
    } 
} 

Или я говорю об общем не-смысле? Извините, я новичок в CSS и HTML и просто ищу обходное решение, чтобы уменьшить начальную шкалу на экране ноутбука с 1.0 до 0.7.

Ваши ответы будут приветствоваться. Заранее большое спасибо!

Бест,

Pascal

Answer 1

Всякий раз, когда я пишу HTML-код, я использую ниже линии:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 

Теперь давайте разберемся, что это значит:

начальный масштаб: регулирует уровень масштабирования при первой загрузке страницы. Это берет оригинальную пикселизацию на экране устройства.

Максимальный масштаб: определяет, сколько после первоначального масштаба пользователь может увеличить

минимальный масштаб:. Определяет, сколько после первоначального масштаба пользователь может уменьшить масштаб.

Пользователь Scalable = 0 означает, что пользователь не может увеличивать или уменьшать масштаб.

Написав вышеприведенную строку в качестве метатега, мы сохраняем все, чтобы: Нет набора зумов, пользователь не может увеличивать.

Теперь мы можем установить масштаб до 0,7, а также, соответственно, другие 3 значения, если хотим.

Но стандартный способ записи такой, как указано выше.

Запросы на медиа будут отображаться, когда после точки прерывания (в случае мобильных устройств) мы хотим, чтобы элементы изменили ориентацию и как они будут расположены на экране (реагировать) без изменения структуры/дизайна кода.

Answer 2

Просто применять некоторые дополнительные CSS в медиа-запросов, чтобы перезаписать по умолчанию CSS (это правильный способ использования медиа-запросов):

.some-class { 
    font-size: 16px; 
    padding: 10px; 
} 

@media (max-width: 480px) { 
    .some-class { 
     font-size: 13px; 
     padding: 7px; 
    } 
} 

Answer 3

Вы также можете добавить «важно» к вашему кодовому блоку, как показано ниже, чтобы убедиться, что он принимает желаемое значение

.some-class { 
    font-size: 16px; 
    padding: 10px; 
} 

@media (max-width: 480px) { 
    .some-class { 
     font-size: 13px!important; 
     padding: 7px!important; 
    } 
}