Адаптивный дизайн что прописывать в head ?

https://www.google.ru/search?q=%D0%9A%D0%B0%D0%BA+%D0%B7%D0%B0%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+Opera+Mini+%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C+%D1%81%D1%82%D0%B8%D0%BB%D1%8C+handheld&aq=f&oq=%D0%9A%D0%B0%D0%BA+%D0%B7%D0%B0%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+Opera+Mini+%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C+%D1%81%D1%82%D0%B8%D0%BB%D1%8C+handheld&aqs=chrome.0.57j61.678&sourceid=chrome&ie=UTF-8

Спасибо, я гуглом пользоваться умею. Поэтому и пишу в топик чтобы кто то разъяснил что к чему 🍿

Видимо не умеете,

По первой же ссылке находим:

<style type="text/css" media="screen and (min-device-width: 481px)">@import "/css/basic.css";</style>

<link rel="stylesheet" type="text/css" media="handheld and (max-device-width: 480px)" href="/css/handheld.css" />

Могу также обеспечить ссылкой на учебник по CSS

как раз первую ссылку и прочел, сделал так:

<style type="text/css" media="screen and (min-device-width: 481px)">@import "style.css";</style>

<link rel="stylesheet" type="text/css" media="handheld and (max-device-width: 480px)" href="handheld.css" />

Не работает. Подхватывает style.css и хоть тресни!

в файлах css не прописывал

@media handheld and (max-device-width: 480px) {

бла бла бла

}

Почему бы стили не объединить в один?

Да в принципе можно (не пробовал). Но я так понимаю, что по идее то должно работать и с несколькими файлами css, только почему то не работает.. Ошибка где то есть, а где?

хз, все в одном файле. К примеру так:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

/* Main Global Layout Settings */
... тут все обычные стили ...

/*  TABLET  : 1024px */
@media only screen and ( max-width: 1024px ){
...
}

/* TABLET  : 768px */
@media only screen and (max-width: 985px) and (min-width: 768px){
...
}

/*  Phone  : 480px */
@media only screen and (max-width: 767px) and (min-width: 480px){
...
}

/* Phone  : 320px */
@media only screen and (max-width: 479px){
...
}