Как использовать медиа-запросы для отображения содержимого, специфичного для устройства

Я новичок в веб-разработке, и я пытаюсь выяснить, как работают медиа-запросы. Я пытаюсь отобразить одно изображение для мобильных устройств и большее изображение для рабочего стола. Я упростил проект до максимума, чтобы изолировать проблему, а также сделал фон разными цветами для лучшей дифференциации. Вот мои файлы:Как использовать медиа-запросы для отображения содержимого, специфичного для устройства

HTML:

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <meta charset="UTF-8"> 

    <title>Website</title> 

    <link rel="stylesheet" media="screen and (max-width:500px)" type="text/css" href="phoneStyle.css"> 
    <link rel="stylesheet" media="screen and (min-width:501px)" type="text/css" href="desktopStyle.css"> 

</head> 

<body>  
    <div id="wrap"> 
      <img id="phone" src="phoneImg.jpg" height="100%" /> 
      <img id="desktop" src="desktopImg.jpg" height="100%" />    
    </div> 
</body> 

</html>

CSS:

phoneStyle.css

#desktop { 
    display: none; 
} 

body { 
    background-color: red; 
    margin: 0px; 
}

desktopStyle.css

#phone { 
    display: none; 
} 

body { 
    background-color: black; 
    margin: 0px; 
}

Я только получить изображение рабочего стола с черным фоном раунд на обоих устройствах. Я тестирую на локальном сервере с помощью MAMP. Любая помощь оценивается.

источник

2016-10-18 Paul

Написание CSS для различных устройства могут быть болью в заднице. С помощью Media Queries проще, если вы знаете, как указать конкретное устройство. Это может помочь вам указать конкретное мобильное устройство из вашего CSS. Скопируйте код и вставьте его в файл CSS и получите crackin '!

/* Smartphones (портрет и пейзаж) ----------- */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* Styles */ 
}

/* Smartphones (пейзаж) ----------- */

@media only screen 
and (min-width : 321px) { 
    /* Styles */ 
}

/* Смартфоны (портрет) ----------- */

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

/* IPADS (портрет и пейзаж) -------- --- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    /* Styles */ 
}

/* IPADS (ландшафтные) ----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* Styles */ 
}

/* IPADS (портрет) ----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles */ 
}

/* Новый IPad (IPad 3) ----------- */

@media only screen 
and (min-device-width: 1536px) 
and (max-device-width: 2048px) 
and (-webkit-min-device-pixel-ratio: 2) { 
    /* Styles */ 
}

/* iPhone 4 --------- - */

@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
}

источник

2016-10-18 17:36:22

Вместо того, чтобы писать его таким образом, вы можете следовать стандартной схеме, как написать запрос СМИ здесь ссылка http://www.w3schools.com/css/css_rwd_mediaqueries.asp Вместо того, чтобы манипулировать им с идентификатором вы можете получить изображения в зависимости от разрешения

источник

2016-10-18 17:34:10 Raul

я проводил исследование, и я знаю, что вы можете использовать @media, но код, который я написал также действует, насколько я могу видеть, но он не работает – Paul

Может быть, вы можете попробовать это #phone { дисплея : никто; } тело { цвет фона: черный! Important; margin: 0px; } – Raul

Как использовать медиа-запросы для отображения содержимого, специфичного для устройства

ответ

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