teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

修正

2019/03/27 16:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -137,6 +137,23 @@
137
137
  この場合どうすれば上記のようになりますか?
138
138
 
139
139
  それともこれはpxで指定するべきなのでしょうか?
140
- ただ、pxで指定した場合、ある程度小さく(280px以下ど)なった時の為にさらに追加で指定しなければなりません。
140
+ ただ、pxで指定した場合、また程度小さくなった時の為にさらに追加でいくつも指定しなければなりません。
141
+ ```
142
+ @media (max-width:458px) {
143
+ .header-left input{
144
+ width: 280px;
145
+ }
146
+ }
147
+ ```
148
+
149
+ ```
150
+ @media (max-width:375px){
151
+ .header-left input{
152
+ width: 200px;
153
+ }
154
+ }
155
+ ```
156
+ これも追加で記述せねばならないという事です。
157
+ これを%なら一つで済むのかと思いました。
141
158
 
142
159
  %で指定するには、どうhtml、cssを変更すれば良いのでしょうか?

1

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

2019/03/27 16:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -119,23 +119,24 @@
119
119
 
120
120
  @media (max-width:740px){
121
121
  .header-left input{
122
- width: 350px;
122
+ width: 80%;
123
123
  }
124
124
  }
125
125
 
126
- @media (max-width:458px) {
127
- .header-left input{
128
- width: 280px;
129
- }
130
- }
131
126
 
127
+
132
128
  ```
133
129
 
130
+ 画面幅を740pxに縮小した際、
134
- こちらの header-leftの中のinput要素のwidthを%で指定すると、
131
+ ![イメージ説明](a49c377f2d309dceaf446cc68bdee9e5.png)
132
+ ↑こうなるが、本当は
133
+ ![イメージ説明](d0bd20231f7544429fe6e153332b2b62.png)
135
- まるで上手くきません
134
+ ↑こうしたです
136
- そもそも親要素の searchクラスの幅が指定されていないからでしょうか?
137
135
 
136
+ 親要素の searchクラスの幅が指定されていないからでしょうか?
138
- この場合どうすれば%で指定した際、手く反映されるでしょうか?
137
+ この場合どうすれば上になりますか?
139
138
 
140
- それともこのケース場合のレスポンシブ、このままも綺麗と言えるのでしょうか?
139
+ それともこpx指定すべきなのでしょうか?
140
+ ただ、pxで指定した場合、ある程度小さく(280px以下など)なった時の為にさらに追加で指定しなければなりません。
141
+
141
- (綺麗のあなた主観
142
+ %で指するに、どうhtml、cssを変更すれば良いのでしょうか?