メディアクエリ（@media screen and ....）の中で@importが効かないように見える件

幸運な病のレシピ

2020年11月26日 22:58

今年は最悪だった。コロナに過剰反応した政府の愚策によって「国体の集計システム」が国体ごと無くなった。

3月にオヤジが亡くなった、父の遺言は実行できた。生きている理由もない。noteは遺言のつもりで書き始めた。書くことが無くなったらやめようと思ったのだがまだそうならない。どうも死ぬまで喋り続けていそうな勢いである。

捨てる神あれば拾う神あり、塞翁が馬、糾える縄のごとし、なんか仕事が入ってきておる。来年は三重国体である。

80歳までならば、「現役（社長）で生きて、社長のママ死ぬ」と保険金が入る。「あんしん財団」と言う小さい会社の経営者保険にはいっている。

最近、「あんしん財団」のCMをテレビで見て驚いた。追い詰められている中小企業の社長多いのだろうなあ。きっと、死んだほうが楽だと思う。けど中々死ねない。死ぬときは道連れにしたいやつが多すぎて列をなしておる。

もう随分「ホーメーページ作り」の「フロントエンドの仕事＝画面上に表示する部分」はしていなかったのだけど、することになった。

いつもはサーバーで動くプログラムを作る。perlと言う言語を使う。

メディアクエリというのは初めて使うことに成った。そりゃあ最後にスマホとPCの両方から見るようなweb作ったのが10年近く前だからなあ。おまけに僕はバックエンドの方だった。

四苦八苦して今日どうやら解決したので書いておきたい。

問題は@imprtの振る舞いである。

正解はこちらだったのだが、テストしていた時に書いていた方法だと読み込んでくれないのである。

@import url("./_com_mv.css") only screen and (max-width:990px);

この書き方だと駄目なのだ。

@media screen and (max-width:990px) {
		/*スマホ用のcssを記述*/
 	@import url("sys/_css/_com_mv.css");	
	@import url("sys/_css/div_mv.css");		/*_wrp とヘッダ、フッタの（サイズなど）の定義　*/
}
@media only screen and (min-width:991px)  {
	/*pc用のcssを記述*/
	@import url("sys/_css/_com_pc.css");	 /*_wrp とヘッダ、フッタの（サイズなど）の定義　
	@import url("sys/_css/div_pc.css");*/
}

2日くらいここで止まった。料理作ってnoteも書いておったのだがね。

@media screen and (max-width:990px) {......}のカッコの中では
@import url("./_com_mv.css") が動かないのだろうか？

誰か教えてもらえないだろうか？とは言っても、もう回避策は決めて書き始めているので、興味からなのだが.......

外出しにしたcssを読んで、この書き方で一回分岐させてから、そこの中でまた分岐することにした。しかし、世の中はすすむねえ。

@import url("./_all.css");
/*共通のcssを記述*/
	@import url("./_com.css");
/*スマホ用のcssを記述*/
	@import url("./_com_mv.css") only screen and (max-width:990px);	
/*pc用のcssを記述*/
	@import url("./_com_pc.css") screen and (min-width:991px) ;