min-width: 1255px;で幅が固定されているにもかかわらず要素が隠れず縮小する。
この動作を再現したい。
例）
https://kango.medi-care.co.jp/
上記のサイトを検証ツールで用いて参考にしながらWebサイト制作を勉強しています。
HTMLとCSSのみの構成でjava等は使用しておりません。
解決方法を教えて頂けると助かります。
flexbox等を用いてみるが要素のみの縮小で文字などが折り返される。
子要素を例としてwidth:1000px;等で固定しても要素が隠れるか、折り返されてしまう。
当該ページはメディアクエリでmin-width:100%に上書きしているようです.
軽く見てみましたが正直不自然な実装してるとは思います.(フォントサイズまで指定変更しててまあまあパワープレイ)レスポンシブ実装ではあんまり参考にしない方がいいかも.
@akisasa
Questioner
ありがとうございます。
該当する場所を教えていただけますでしょうか？
自分は@media (min-width: 769px)のところしか見つけられなかったので、お手数をおかけすると思いますが、上記以外のメディアクエリがありましたら教えて頂きたいです。
CSSソース中でmax-width: 768pxとかで適当に検索かけてください.
なお,DevToolsの要素ツールでは適用対象のスタイル指定しか出てこないため,そちらで見る場合はウィンドウ幅などを変えながら調べる必要があります.(viewportの指定が悪いせいか,デバイスエミュレーションではうまくスタイルが変化せず検証しづらいです)
@akisasa
Questioner
該当の場所見つけれました。
今後の参考にさせて頂きます。ありがとうございます。
問題解決できたので質問をクローズさせていただきます。
