1

私がやったことはこれです

 <link type="text/css" rel="stylesheet" media="screen and (max-device-width: 1300px)" href="css/style.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 1301px)" href="css/big.css">

解像度に依存する最も重要な変更は次のとおりです。big.css はこれを使用します

.content
{
    width:20%;
}

style.css は幅に 50% を使用します。

私の問題は、モニターが 2 つあることです。右側は style.css に応答し、左側は big.css に応答します。右側のモニターでサイトを開くと、style.css が使用されます。問題は、ウィンドウをつかんで左のモニターにドラッグしても、ページをリロードしない限り .css が変更されないことです。しかし、ウィンドウをより大きな画面にドラッグすると、自動的に変更されます。多分これはJavaScriptで可能ですか？

4

1 に答える 1

4 
<link type="text/css" rel="stylesheet" media="screen and (max-width: 1199px)" href="css/style.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width: 1200px)" href="css/big.css">

すべてのスタイルを 1 つのファイルに入れることもできます。

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

CSS

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

/* Large screens ----------- */
@media only screen 
and (min-width : 1200px) {
/* Styles */
}
于 2013-07-31T10:30:53.130 に答える