Как применить ширину окна просмотра на основе ширины устройства?

Question

В настоящее время я установил ширину окна просмотра для ширины устройства для мобильных пользователей. На некоторых страницах мне нужно растянуть ширину vieport, чтобы соответствовать контенту, например комиксам или внешним диалоговым окнам, поэтому я применяю ширину видового экрана, скажем, 480 пикселей.

Все было отлично, пока я не протестировал его на планшете Iconia B1 (1024x600). Ширина видового экрана, ограниченная 480, создает проблему макета, которая не покрывает 100% экрана.

Вопрос в миллион долларов: Как применить ширину 480 пикселей шириной только, если ширина устройства ниже 480? И , если больше 480, примените ширину устройства вместо (чтобы сделать покрытие макета 100% экрана). Есть идеи? Возможно ли это?

Answer 1

A 10 баксов ответьте на ваш вопрос.

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

@media only screen and (max-width: 480px) { 
    // properties for smaller screens 
} 

// other styles if screen is bigger 

Хорошо, у вас может быть столько запросов, сколько вы хотите. И затем все прикреплены к концу вашего файла CSS (.css). Вы можете использовать их для динамического изменения стиля без использования JS. Они удобны и удобны в обращении.

@media only screen and (max-width: 480px) { 
    // properties 
} 

@media only screen and (max-width: 600px) { 
    // properties 
} 

И вам просто нужно отредактировать детали, которые необходимо изменить, другие свойства будут одинаковыми!

Answer 2

Вы можете использовать следующее:

@media (max-width:480px) { 
.myclass { 
// your code here 
} 
} 

.myclass { 
// your code here 
} 

редактирования: В приведенном выше коде вы можете установить .MyClass по ширине: 480px внутри @media медиа-запросы и использование ширины: 100% для других.