私はモバイルフレンドリーにしているウェブサイトの特定のページを作ることにいくつかの問題があります。私は携帯フレンドリーなメタタグ<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">を持っているが、それはトリックを行うようには見えない。問題は私のテストウェブサイトの "www.websitetesting.pro"にありますページをモバイルフレンドリーにするには
影響を受ける要素は、 "rowone" divの3行目に列挙されているポートフォリオの下の画像で、彼ら自身は "rowone"を持つFigure要素の下にある。 問題は、ポートフォリオページの "portfolio.css"のCSS内で上記の要素が原因である可能性が最も高いです。 ここにそのコードがあります。
https://pastebin.com/wugN8SSy ありがとうございます！
応答性の高いデザインをもう少し調べる必要があります。 .column divから明示的に300pxに設定されていることはほとんど問題ありません。 3つ続けているので、画面の解像度が<、幅が900pxの場合、これは明らかに問題になります。パーセンテージを設定する方がはるかに良い考えです。
幅を32％に、余白を1％に設定して、そこにfigure要素のmax-width: 100%を設定して、反応性サイトを設計する方法を理解することができます。
注：これらの値は、あなたの例では任意に作成され、正確に100％ではありません。レスポンシブデザインのために既に多くのグリッドが作られています。それは私の好みの解決策ではありませんが、Bootstrapをジャンプ・ポイントとして調べることをお勧めします。
固定幅を設定したり、サイジングにpxを使用しないことをお勧めします。これは、デバイスごとにピクセル数と比率が異なるためです。フォントのサイズをem/remで、レイアウトのサイズをパーセントで表示してみてください。
W3スクールはRWDに関する良いチュートリアルを提供しています。見てみな。
ありがとう、私はそれをチェックアウトします。 – Crimsonwrath
ちょうど@ BPierceの答えに追加する：これはほとんどのシナリオで "ベスト"かもしれませんが、確かにすべてではありません。固定幅ディスプレイとモバイル上のピクセル完全レイアウトを必要とするシナリオ（アプリケーションなど）があります。このベストプラクティスは経験則ではありますが、問題を引き起こしてはいけません。 – Bangkokian
ありがとうございました。私はこれをやめることができます。申し訳ありませんが、これはおそらく愚かな質問だった、私はまだ自分自身を教えようとしています – Crimsonwrath