Помогите с адаптивной версткой

G1
На сайте с 17.05.2015
Offline
22
839

Всем привет! Помогите, пожалуйста!

Установил тему с themepix, а она не адаптивная. Поискал в Интернете про адаптацию сайта, почитал, решил применить media screen. Но здесь встала проблема - я полный ноль в программировании, а на сайтах нет объяснений для чайников. Вставил между <head и head/> <meta name="viewport" content="width=device-width, initial-scale=1.0">

Ещё на одном сайте написано, что для подключения css таблиц нужно вставить:

<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />

<link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" />

<!-- для iPhone 4 -->

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

<!-- для iPad portrait and landscape -->

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Я не знаю куда это вставлять

На хабрахабр нашел статью http://habrahabr.ru/post/119127/, там опять же не для чайников и я не понял, что к чему, например, как подключить Media Queries Javascript

Можете объяснить, это все в отдельно файле делать, или редактировать css style?

И, если можно, то пошагово объясните, как подключить Media Queries.

Да, еще. Когда в браузере открываю код сайта, вижу в нем размер ширины области контента width: 960px. Открываю css style, там такого размера нет (видно на скриншотах)

jpg Screenshot_193.jpg
jpg Screenshot_194.jpg
Gerga
На сайте с 02.08.2015
Offline
94
#1
grigory1113:
Да, еще. Когда в браузере открываю код сайта, вижу в нем размер ширины области контента width: 960px. Открываю css style, там такого размера нет (видно на скриншотах)

Как правило такие темы используют несколько css файлов, в вашем случае, width установлен в screen.css .

grigory1113:


<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" />

<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientationortrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Этим подключаете css файлы при наступлении определенных условий. Если <link>, значит в область <head>.

Дерзайте http://htmlbook.ru/css/value/media

G1
На сайте с 17.05.2015
Offline
22
#2

Gerga, Большое спасибо! Второй совет помог, но screen.css нет файла такого у меня в теме

Gerga
На сайте с 02.08.2015
Offline
94
#3

grigory1113, я судил по вашему скрину site.ru/wp-content/themes/GamesRoom/css/screen.css, приглянитесь к нему :)

G1
На сайте с 17.05.2015
Offline
22
#4

Gerga, А вы не знаете, где его найти, чтобы редактировать?)

Gerga
На сайте с 02.08.2015
Offline
94
#5

grigory1113, по ФТП или через файловый менеджер хостинга.

G1
На сайте с 17.05.2015
Offline
22
#6

Gerga, Спасибо!

Badmaestro
На сайте с 11.07.2008
Offline
234
#7

Кстати, а не легче ли установить шаблон с изначально адаптивным дизайном?

Заходим в Шаблоны Вордпресса, в фильтре ставим галочку "Адаптивные", вуа-ля)

SEO без воды ( http://kupit-slona.ru ) Продвижение сайтов от 200 $ в мес ( https://searchengines.guru/ru/forum/1038146 )
altezzik
На сайте с 06.11.2011
Offline
247
#8

Верстка и программирование разные области.

G1
На сайте с 17.05.2015
Offline
22
#9

А вообще адаптация под мобильные устройства нужна, даже если мобильного траффика 62%? Посмотрел основных конкурентов, там ни у кого не адаптировано. Просто, с помощью медиа запросов не получается ничего, не могу разобраться, а с помощью плагина адаптирую, сайт вообще не узнать

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий