Как сделать страницу подходящей шириной экрана на мобильном устройстве?

Question

У меня есть одна страница формы. Мне нужна эта форма, масштабируемая и соответствующая ширине экрана на любом устройстве (Android, iOS, ...). Как я могу сделать это с помощью HTML или CSS? style="width:100%" не является решением в моем случае.

Спасибо!

Answer 1

Почему width:100% не является вариантом?

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

form { 
    width: 800px; 
} 

@media only screen and (max-width: 800px) { 
    form { 
     width: 100%; 
    } 
} 

Приведенный выше код сделает form 800px широкий на любом экране шире, чем 800px, и если он отображается на экране размером, равным или ниже 800px, это будет на 100% вместо этого. Вы можете использовать столько, сколько хотите, так что, например, вы могли бы поместить другой медиа-запрос после этого для max-width: 500px и соответственно изменить стили формы для размеров экрана 500 пикселей и ниже.