レスポンシブデザインと汎用クラスについて

レスポンシブデザインと汎用クラスの両立についてご教示いただきたいです。

WEBページを作成するにあたり、汎用クラスを用意しようと考えております。

下記のような形で用意しておき、適用したいタグにクラス名を付与することで、
CSSが機能するようにしようとしております。

/* 例　*/
.mt8 {
	margin-top: 0.8rem;
}
.mt16 {
	margin-top: 1.6rem;
}
.mt24 {
	margin-top: 2.4rem;
}
.text10 {
	font-size: 1.0rem;
}
.text11 {
	font-size: 1.1rem;
}
.text12 {
	font-size: 1.2rem;
}

上記のようにCSSを書かずとも、クラスの付与のみでfont-sizeやmargin,padding等をしたいです。

ただ、レスポンシブデザインのことを考えた場合、
例えばPCサイト用のレイアウトをこれらの汎用クラスを用いてコーディングした場合に、
スマートフォン用のレイアウトのコーディングをする際に、汎用クラスがあることによって
余白の調整が難しくなってしまうと考えております。

レスポンシブデザインを考えるにあたって、画面幅によってクラスを付け替える方法等、
レスポンシブデザインと汎用クラスを両立させる方法があればぜひご教示いただきたいです。

何卒よろしくお願いいたします。

行動規範の内容に同意します

回答3件

例示のルールはアリだと思います。
なぜならば、remはルート要素のフォントサイズを基準にした相対的な単位なので、ルートのフォントサイズを適切に設定すれば、適切なレイアウトになりうるからです。

投稿2020/06/02 08:14

Lhankor_Mhy

総合スコア36074

ほんの一例になりますので、
ご参考程度に。

メディアクエリで適用させるCSSを分けるが一番いいかと。
（PCも入れたレスポンシブにするなら特に）
例えば、920pxを基準に、PC用とスマホ用で分けるとします。

css
1/* PCは、固定絶対値でも差異はないので、pxを当てる */
2html {
3  font-size: 16px;
4}
5.mt16 {
6  margin-top: 1.6rem;
7}
8
9@media screen and (max-width: 920px) {
10  html {
11    font-size: 4vw; /* 画面幅の4%の大きさのフォントサイズとなる */
12  }
13}
14/* フォントサイズが、スマホの時は、デバイスサイズによって、フォントサイズが変化するようになっているため、.m16はどのデバイスにおいても、基準のフォントサイズの1.6倍の大きさとなる。つまり、フォントサイズが可変になる=他のremを当てたものも可変になる、ということ */

他にもいろいろ方法があると思いますが、
そもそも両立というか、その汎用クラスが、デバイスごとに適切な大きさになるよう、組むのが、
一番手間がかからず、メンテナンスをしやすい構築となると思います。
（上記も、モバイルファーストで設定した方がいいかもしれない。← 最初の基準を、モバイルの方にするということ）
そのために、ビューポート系単位を使うのが一番手っ取り早いです。

投稿2020/06/02 08:12