2013-11-15 4 views
0

У меня возникла проблема, когда я пытаюсь настроить свой CSS после размеров пользовательского устройства. Я использую следующий код:CSS - Невозможно изменить ширину/высоту текстового поля для мобильных устройств

@media only screen and (max-width: 700px) { 
#form input[type=text] 
    { 
    width: 100px; 
    height: 50px; 
    margin: 95px -60px 0 15px; 
    box-shadow: inset 0px 0px 3px 1px grey; 
    border:1px lightgrey solid; 
    border-radius: 4px; 
    text-align: center; 
    font-family: times; 
    font-size: 10px; 
} 
} 

Все настройки применяются правильно и изменить первоначальный CSS, за исключением размеров, которые остаются неизменными. Как это вообще возможно? Это ошибка CSS? Если некоторые из них применяют селектор правильно и все, но размеры нет. Это не проблема с кешем, и я пробовал несколько устройств.

Я очень ценю помощь, Фредрик

ответ

1

Вы можете разместить ссылку на ваш код?

Возникает ли проблема только на мобильном устройстве? Что происходит при изменении размера окна браузера на ширину менее 700 пикселей?

Обычно такая ошибка возникает из-за наличия селекторов, которые слишком специфичны в другом месте вашего кода, что затрудняет их переопределение.

Попробуйте добавить! Важно до конца вашего объявления, чтобы посмотреть, можно ли переопределить стиль. Остерегайтесь его вообще плохой практики, чтобы оставить! Важно там, поэтому, если это сработает для вас, найдите свой код для злоумышленников и настройте его, пока ваш медиа-запрос не сможет переопределить.

+0

Спасибо большое за ответ. Добавление! Важно действительно работает, что является странным, поскольку нет другого определения этих свойств, кроме нормального. Кроме того, если бы была помеха между свойствами, не все ли они были бы полностью переопределены? Только фактические размеры текстового поля не вступают в силу, остальные работают нормально. Не могли бы вы объяснить, почему использование! Важна плохая практика в конкретных условиях? Есть ли что-то, что можно было бы ожидать, совместимость, возможно, возможно? Опять же, спасибо большое! – Fredrik

+0

Это действительно сложно сказать, не видя ваш код. Это плохая практика по нескольким причинам. Сначала важное объявление не поддерживается всеми браузерами. Например, Internet Explorer. Но поскольку вы используете его на мобильной странице, это может сработать для вас. Обязательно проверьте несколько версий мобильных браузеров как на Android, так и на iPhone. –

+0

Во-вторых, вы в основном говорите, что браузер игнорирует любую попытку изменить селектор в другом месте документа, что противоречит термину «Каскадные таблицы стилей». И наконец, в любое время, когда вы захотите переопределить этот стиль позже в таблице стилей, вам придется снова добавить важный параметр, который увековечивает проблему и увеличивает размер файла в вашем документе css. –

Смежные вопросы