Внешний запрос СМИ для CSS, который не работает в Chrome

Я играл с использованием разных файлов CSS для разных размеров браузера (чтобы сделать код более чистым и легким для настройки). Это отлично работает в Firefox, но не в IE или Chrome Края:Внешний запрос СМИ для CSS, который не работает в Chrome

<link rel="stylesheet" media="screen" href="./css/style.css" /> <!-- common css --> 
<link rel="stylesheet" media="all and (max-device-width: 767px)" href="./css/smaller- 
screen.css" />

Я также попытался:

<link rel="stylesheet" media="(max-device-width: 767px)" href="./css/smaller-screen.css" />

В качестве теста, я ставлю это в меньшего screen.css файла:

body { 
    min-width: 400px; 
    background: red; 
}

Мой HTML довольно прост:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="iso-8859-1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Chambres D'hotes New</title> 

    <link rel="stylesheet" media="screen" href="./css/style.css" /> <!-- common css --> 
    <link rel="stylesheet" media="(max-device-width: 767px)" href="./css/smaller-screen.css" /> 

    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 

    content here 

    </body> 
</html>

источник

2016-10-24 Andrew Newby

Вы просто пробовали 'max-width' вместо' max-device-width'? – Pete

Если ваши стили полностью не различаются для разных размеров экрана, имеет смысл объединить это в ресурс _one_ CSS и использовать там медиа-запросы. – CBroe

@ CBroe - да, они совершенно разные по внешности (в основном вокруг заголовка и боковых панелей). Я использовал их для всех в одном файле, но это затрудняет настройку позже на –

Попробуйте только с max-width вместо max-device-width:

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

More information about media queries

источник

2016-10-24 12:10:13 Pete

-1

Вы можете просто использовать этот

@media (max-width:767px){ 
     body { 
      min-width: 400px; 
      background: red; 
     } 
    }

Этот медиа-запрос будет работать должным образом

Или вы можете использовать этот

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

источник

2016-10-24 11:47:39

Это не отвечает на вопрос. –

@shahid mohammad, спасибо за ответ. Я уже знаю, как это сделать - я хочу поместить весь файл CSS в медиа-запрос. –

Это не * понимает * вопрос. – connexo

Внешний запрос СМИ для CSS, который не работает в Chrome

ответ

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