web-dev-qa-db-ja.com

SASS bootstrapメディアクエリ/ sassファイル

SASS Bootstrapでレスポンシブウェブサイトを作成しようとしていますが、sassスタイルシートに問題があります。

スタイルシートのsassバージョンを含めると、トップレベルの要素など、HTMLの特定の要素のみが選択され、行や列の中にあるものは選択されませんが、CSSバージョンは完全に機能します。

メディアクエリ用に別のスタイルシートも作成しましたが、応答しません。

頭：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/sass-bootstrap.css" rel="stylesheet">
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

スクリプト：

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/sass-bootstrap.min.js"></script>

メディアクエリ：

$screen-lg-min: 1200px;
$screen-md-min: 992px;
$screen-sm-min: 768px;

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Sass Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { 

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { 

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}

私はおそらく何か間違ったことをしているでしょうが、誰かが何か助けになることができれば私はそれをいただければ幸いです。

twitter-bootstrapresponsive-designsass
10
wilcode

SassファイルをCSSにコンパイルする方法について読む

基本的にあなたはそれらをコンパイルする必要があります：

$ gem install sass
$ sass sass/main.scss main.css
$ sass sass/media-screens.scss media-screens.css

次に、これをHTMLで編集します

<link href="main.css" rel="stylesheet">
<link href="media-screens.css" rel="stylesheet">

迅速な開発のために監視タスクを設定することをお勧めします

$ sass --watch main.scss:main.css

その最後の例では、 importing メディアクエリスタイルシートをmainに入れて、大量のファイルをコンパイルする必要がないようにすることをお勧めします。

さらに良いことに、 Grunt のような自動ビルドツールを使用して、これらすべてを実行してください。

7
Joseph Spens
// DEVICE LIST //
$xs-min: "only screen and (min-width:none)";
$xs-max: "only screen and (max-width:520px)";
$xs-sm: "only screen (min-width: none) and (max-width:767px)";

$sm-min: "only screen and (min-width:768px)";
$sm-max: "only screen and (max-width:991px)";
$sm-md: "only screen (min-width: 768px) and (max-width:991px)";

$md-min: "only screen and (min-width:992px)";
$md-max: "only screen and (max-width:1199px)";
$md-lg: "only screen (min-width: 992px) and (max-width:1199px)";

$lg-min: "only screen and (min-width:1200px)";
$lg-max: "only screen and (max-width:none)";

上記のようにデバイスリストを書き留め、ブレークポイントをカスタマイズします。 SCSSで使用している間は、＃{}を使用してください。また、コンパスのヘルパーメソッドを使用しているため、compassを使用していることを確認してください。

/* Small devices (tablets, 768px and up) */
@media #{$sm-min} { 

}

/* Medium devices (desktops, 992px and up) */
@media #{$md-min} { 

}

/* Large devices (large desktops, 1200px and up) */
@media #{$lg-min} { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}
2
Nizam Kazi
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

ページでscs​​sファイルを使用しているようですが、ブラウザはscssファイルをサポートしていません。まず最初に、scssファイルをcssファイルにコンパイルする必要があります。Scountアプリが役立つかもしれません： http://mhs.github.io/scout-app/

1
Slawa Eremkin

ジョセフにアドバイスをありがとう。メディアクエリをスタイルシートの下部に追加しましたが、主な問題は、画面が正しい幅に設定されていなかったためです。私は次のようになりました：

/* Extra Small devices (mobiles, 320px and up) */
@media (min-width: 320px) and (max-width: 767px) {}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1920px;) {}
0
wilcode