2014-02-18 5 views
0

У меня есть 3 разных таблицы стилей, один для ПК, один для смартфонов, таких как iPhone5S, Samsung Galaxy S4 ... и еще один для небольших смартфонов, таких как мой Samsung Galaxy mini.Отзывчивый css не работает должным образом

Это, как я написал мои ссылки в моем HTML файл:

<link media="handheld, only screen and (max-width: 300px), only screen and (max-device-width: 300px)" href="StylesheeetSmallSphone.css" type="text/css" rel="stylesheet" /> 
    <link media="handheld, only screen and (min-width:301px) and (max-width: 480px), only screen and (min-device-width:301px) and (max-device-width: 480px)" href="StylesheetLargeSPhone.css" type="text/css" rel="stylesheet" /> 
    <link media="Screen" rel="stylesheet" type="text/css" href="StylesheetPC.css" /> 

На каждом устройстве СМЧ применяется последний один. Что мне нужно изменить, чтобы каждое устройство отображало свой собственный css?

+0

Вы добавили тег meto viewport в раздел html head? https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag – sinisake

+0

Нет ... но не будет использовать это означает, что я должен указать конкретную страницу для определенного устройства? Я пытаюсь запустить один и тот же сайт на разных устройствах, просто используя разные классы css. –

+0

Нет, все будет хорошо работать на настольных компьютерах ... попробуйте с ним, IF синтаксис атрибутов ссылок в порядке ... – sinisake

ответ

0

Попробуй ..

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

ли вы имеете в виду ИСКЛЮЧИТЕЛЬНО последний один или же последний?

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