セマンティック グリッド システムを使用してレスポンシブ サイトを構築しています。ただし、特定の画面サイズに達すると明らかに起動するはずのメディア クエリには、何かが正しくありません。
Web サイトの例で私が意味することを参照します。たとえば、これを iPhone で表示すると、モバイル デバイスで単一の列構造に調整することになっている場合でも、Web バージョンのページ。これは、iPhone の Safari と Chrome の両方に当てはまります。ただし、RWD ブックマークレットを使用してさまざまな解像度での外観を確認すると、モバイル解像度で期待どおりに表示されます。また、皮肉なことに、デスクトップの Safari でページのサイズを変更すると、適切な画面サイズになるとそれに応じて調整されますが、Firefox では調整されません。
720pxに達したときに使用するメディアクエリは
@media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
ここでは的外れかもしれませんが、それが問題だと思います。しかし、これがsemantic.gs Webサイトから直接のものであることを考えると、私は必ずしも彼ら自身のコードに疑問を呈する専門知識を持っているとは思いません.
何が問題なのかわかりますか？