Css @media для мобильных устройств и рабочего стола max-width

Question

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

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

Я пробовал эти сценарии

/* works only for mobile devices but not for re-sized desktop window */ 
    @media only screen and (max-device-width: 768px) { ... } 

    /* works only for re-sized desktop but not for mobile devices */ 
    @media only screen and (max-width: 768px) { ... } 

    /* works only for re-sized desktop window but not for mobile devices*/ 
    @media only screen and (max-device-width: 768px), (max-width: 768px) { ... } 

Есть ли способ достичь такого же поведения как для мобильных устройств и окна браузера рабочего стола, который имеет ширину меньше, чем 768px?

Answer 1

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

@media all and (max-device-width: 768px) { 
... 
} 

и мета-тегов в заголовке

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

Answer 2

ли добавить этот код перед головой или после названия?

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

Answer 3

Помещенные ниже мета-тега для вашего HTML головки тега

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

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

/*Mobile Portrait and Landscape*/ 
@media only screen and (max-width: 768px) { .. } 

Если вы хотите, чтобы увидеть реагирующее поведение в вашем браузере IE 6-8 и тогда вам потребуется приложить respond.js к вашему HTML головной секции, ниже есть ссылка, где вы можете загрузить его.

https://github.com/scottjehl/Respond

Спасибо, Mohsinali Chidi.