大損失！ CSSレイアウト！ _html/css_WEB-ITnose

頻繁なレイアウトの混乱 - 自分のコンピューターでは正常に動作しますが、他の人のコンピューターや携帯電話で開くと...

CSS の問題は - 設計図によると実装は難しくありませんしかし、ページにさまざまな画面でほぼ同じ効果を持たせたい場合、それはそれほど単純ではありません。

昔CSSを書いていた時は、自分が見るためのものだったのであまり考えずに書いていましたが、パソコン上に表示されると模倣したページと同じだったので、やったような気がしました。最近、チームは 2 つのかなり大規模なプロジェクトに取り組み始め、私はそのうちの 1 つのフロントエンド実装を担当しました。インターフェースを実装した後、私の隣にいた iOS の大御所に大きなモニターを使って様子を見てもらいましたが、何でインターフェースがこんなに奇妙になってしまったのでしょう...変更しました。何度も何度も... ....

私が書いた CSS スタイルを見て、問題がどこにあるのかを知りました...インターフェイスの一部で絶対位置を使用し、左: 200; のような特定のピクセルを使用しました。なぜパーセンテージを使用しないのかは聞かないでください。単に全画面で Web を閲覧したくない人もいるからです。パーセンテージを使用する場合、その人たちがどのように感じるかを考慮する必要があります。 、すべてが密集します。しかし、特定のピクセルを使用した後、大きな画面で開くと問題が発生します。500ピクセルはコンピューターの画面幅の半分に近いですが、上部はそのほんの一部にすぎません...モバイルで開くとさらにひどいです。端末…でも賢いですね すぐに解決策を思いつきました、ふふ～

解決策——

*PC用とモバイル用に1部ずつ作成（レスポンシブ？）

元々はboostrapのようにレスポンシブにしようと思ってたんですが、見つけました非常に難しいです。注意しないと PC 側のレイアウトさえも崩れてしまう可能性があります。とにかくそれほど複雑ではありません。PC 側の多くのスタイルはモバイル側でも再利用できるので、そうするのも良いでしょう。それは別にして。 。 。これは、モバイル閲覧が検出されたときに自動的にモバイルバージョンにジャンプするjsコードです~

function check_mobile(){    var sUserAgent = navigator.userAgent;                if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {                location.href = '/mobile';                        } else {            }        }

*PCレイアウトの混乱の解決策(フローティング!位置に注意してください~)

1 位置設定を使用できますか?ですので、位置決めは使わないでください。位置決めはとても便利ですが、大変なこともあります... いろいろな方法でフローティングして、inline-block を表示してみてください。

2 また、配置が絶対に必要な場合は、以下のような親要素として body を配置しないでください。position:relative を使用しないでください。背景全体が配置されている div 内に配置し、position:Absolute; left: 100px; でロゴを配置します。このようにして、まず背景全体が配置されている領域内の領域を分割します。ここでは赤い枠線でマークされています。この領域を自動的に中央に配置します。マージン: 0 自動、位置: 相対、このようにして、画面サイズが変更されても、ロゴが表示される場所に表示されます。そうですね…そうですね…

※モバイルレイアウト注意！ ！

モバイルレイアウトは、表示するものが少なく、互換性を考慮する必要がないため、PCレイアウトよりもはるかにシンプルです。さまざまなCSS3アニメーションセレクターを自由に使用できます~

私はモバイルで作業を始めたばかりです。プロジェクトのニーズのため、たくさんの記事を読んだ後、それを始めました。それでもPC版とは少し異なります。 。 。しかし、主に...

1 メタ タグ

           <meta charset="UTF-8">           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />           <meta name="apple-mobile-web-app-capable" content="yes" />           <meta name="apple-mobile-web-app-status-bar-style" content="black" />           <meta name="format-detection" content="telephone=no" />       

モバイル版を作成したい場合は、各メタ タグの意味とレイアウトを Baidu に伝えてください。 .

2 モバイル側では、互換性を無視して CSS3 の flex レイアウト (伸縮自在なレイアウト) を使用できます。本当に超便利です、ダンダンダン〜

いくつかの flex レイアウトを見て、突然これは次のように作成されています。タオバオモバイル版のホームページを真似して…とても便利ですよ~

また、次の点にも注意する必要があります:

幅にはパーセンテージを使用し、高さにはレムを使用し、位置決めするときに左右の距離にはパーセンテージを使用し、上下の距離を表す rem 、フォントとして rem を使用する、まあそれだけです...