質問編集履歴

2

修正

2019/03/27 16:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -276,7 +276,41 @@
276
276
 
277
277
  それともこれはpxで指定するべきなのでしょうか?
278
278
 
279
- ただ、pxで指定した場合、ある程度小さく(280px以下ど)なった時の為にさらに追加で指定しなければなりません。
279
+ ただ、pxで指定した場合、また程度小さくなった時の為にさらに追加でいくつも指定しなければなりません。
280
+
281
+ ```
282
+
283
+ @media (max-width:458px) {
284
+
285
+ .header-left input{
286
+
287
+ width: 280px;
288
+
289
+ }
290
+
291
+ }
292
+
293
+ ```
294
+
295
+
296
+
297
+ ```
298
+
299
+ @media (max-width:375px){
300
+
301
+ .header-left input{
302
+
303
+ width: 200px;
304
+
305
+ }
306
+
307
+ }
308
+
309
+ ```
310
+
311
+ これも追加で記述せねばならないという事です。
312
+
313
+ これを%なら一つで済むのかと思いました。
280
314
 
281
315
 
282
316
 

1

質問文章の変更スクショ追加

2019/03/27 16:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -240,7 +240,7 @@
240
240
 
241
241
  .header-left input{
242
242
 
243
- width: 350px;
243
+ width: 80%;
244
244
 
245
245
  }
246
246
 
@@ -248,34 +248,36 @@
248
248
 
249
249
 
250
250
 
251
- @media (max-width:458px) {
251
+
252
-
253
- .header-left input{
252
+
254
-
255
- width: 280px;
253
+
256
-
257
- }
254
+
258
-
259
- }
260
-
261
-
262
-
263
- ```
255
+ ```
256
+
257
+
258
+
264
-
259
+ 画面幅を740pxに縮小した際、
265
-
266
-
260
+
267
- こちらの header-leftの中のinput要素のwidthを%で指定すると、
261
+ ![イメージ説明](a49c377f2d309dceaf446cc68bdee9e5.png)
262
+
268
-
263
+ ↑こうなるが、本当は
264
+
265
+ ![イメージ説明](d0bd20231f7544429fe6e153332b2b62.png)
266
+
269
- まる上手くいきません
267
+ ↑こうしたい
270
-
268
+
269
+
270
+
271
- そもそも親要素の searchクラスの幅が指定されていないからでしょうか?
271
+ 親要素の searchクラスの幅が指定されていないからでしょうか?
272
-
273
-
274
-
272
+
275
- この場合どうすれば%で指定した際、手く反映されるでしょうか?
273
+ この場合どうすれば上になりますか?
276
-
277
-
278
-
274
+
275
+
276
+
279
- それともこのケース場合のレスポンシブ、このままも綺麗と言えるのでしょうか?
277
+ それともこpx指定すべきなのでしょうか?
278
+
280
-
279
+ ただ、pxで指定した場合、ある程度小さく(280px以下など)なった時の為にさらに追加で指定しなければなりません。
280
+
281
+
282
+
281
- (綺麗のあなた主観
283
+ %で指するに、どうhtml、cssを変更すれば良いのでしょうか?