回答編集履歴
1
数値が適切ではありませんでした。
test
CHANGED
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
|
|
149
149
|
どちらの領域も同じ割合で縮んでいく。という感じになります。
|
|
150
150
|
|
|
151
|
-
6
|
|
151
|
+
639pxで縮小開始の場合、計算式は以下になります。
|
|
152
152
|
|
|
153
153
|
PCで指定した#rank ol li div a dl dtのwidth / 640 * 100 = レスポンシブ#rank ol li div a dl dt
|
|
154
154
|
|
|
@@ -157,3 +157,17 @@
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
全て脳内だけで、検証はしておりません(笑)、あしからず。
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
すみません。追記です。
|
|
164
|
+
|
|
165
|
+
投稿した後、風呂場で気付きました(笑)。
|
|
166
|
+
|
|
167
|
+
先の計算式で、640としたところは、これだと、左右に全くマージンが無い状態になるので、
|
|
168
|
+
|
|
169
|
+
例えば、#rankがwidth="100%"でol左右に20pxづつマージンを入れる場合、640ではなく600となります。
|
|
170
|
+
|
|
171
|
+
でも、スマホサイズで左右に20pxもあると、狭いかと思うので、#rank ol もレスポンシブ記述では、
|
|
172
|
+
|
|
173
|
+
margin:0 auto;とwidth:90%;などを追記とするのが正解かもしれませんね。
|