Отзывчивый выберите в раскрывающемся списке

Question

HTML:

<select id="location" name="city"> 
    <option selected="selected" value="Los Angeles">Los Angeles</option> 
    <option value="Houston">Houston</option> 
    <option value="New York">New York</option> 
</select> 

CSS:

select{ 
    width: 100%; 
    max-width: 600px !important; 
} 

поле выбора не покрывает 100% от дел. Если я изменяю максимальную ширину до минимальной ширины, она работает. Однако, когда я уменьшаю окно браузера, окно не будет уменьшаться соответственно и выходить из div. Любое предложение?

Answer 1

Если вы делаете отзывчивый дизайн, проще всего работать с запросами @media. Вы можете изменить свой CSS на основе размера браузера. То, что я написал ниже, вероятно, не совсем то, что вы хотите, но это хорошее начальное место.

@media all and (max-width: 600px){ 
    select { 
    width: 100%; max-width: 100%; 
    } 
} 

Так что код в основном говорит:

When the badness will happen in the browser 
    Adjust the code accordingly 

Есть другие запросы @media на основе устройств, мин-ширина и т.д. Но это, где вы начинаете, и это хлеб и масло для отзывчивый дизайн.