モバイルブラウザに1つの要素だけを残すにはどうすればいいですか？

Question

フレックスボックスを使用すると、大きな画面に表示されたときにすべての行が表示され、次に画面が表示されているときに小さくなった。 これは自分のコンピュータで動作しますが、携帯電話（Safari、Chrome、Firefox）でブラウザを使用するとクロムでモバイルエミュレータを使用するとサイズが変更されるため、2つのセクションが隣り合っているため、 。

は今、私はこれを追加してみました：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 

しかし、それは、ページの残りの部分のフォーマットで台無し。 類似の要素は1つだけありますか？

Answer 1

メディアクエリを使用すると、特定の解像度でしか動作しないため、効果的にモバイル上で動作するようにすることができます。以下のメディアクエリは、すべての電話機に含まれているスタイルを実行します。

@media only screen and (max-width:766px) { 
    .myClass {width:100vw;display:block;} 
}