ホームページ >ウェブフロントエンド >htmlチュートリアル >WORKS ページの改訂に関する苦情_html/css_WEB-ITnose

WORKS ページの改訂に関する苦情_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:23:111029ブラウズ

最近、移動が忙しくて、エネルギーをほとんど使ってしまい、本当に疲れてしまいました。それで、何か書きたいと思ったんですが、何を書けばいいのか分からなかったので、存在感を示すためにコメントをいくつか書きました。

最近、時間をかけてWORKSページを少し修正しました。たまたま昨日は Apple の春のカンファレンスでした。このスタイルを強調するために、Apple のロジックに従って簡単に説明します。

  1. 最も一般的な CSS 3.0 スタイルの記述方法を使用します。このページを作成するとき、私たちは人気のある CSS 2.0 スタイルを使用して、内部から外側まで新しい外観を与えました。
  2. レスポンシブレイアウトの設計コンセプトにより、より多くのユーザーがさまざまな解像度の端末でより良いエクスペリエンスを得ることができます。
  3. 主流のブラウザ向けの視覚的なプレゼンテーションが向上し、IE8 以下のブラウザに対するサポートの向上は考慮されなくなりました。
  4. もう編集できません!

今回一番重要なのは、長さの単位としてあまり馴染みのないvwとvhが所々で使われていることです。簡単に言うと、ウィンドウ(可視領域)の幅と高さに基づいてパーセンテージ値を自動的に計算します。通常 JS に依存する一部のコンテンツを簡単に実装できます。

例:

window.innerWidth = 1280px と仮定し、div の幅を width:10vw に設定すると、この div の幅はウィンドウの表示領域の 10%、つまり 1280 に相当します。 / 10 = 128px、この値はウィンドウが変わると自動的に変わります。

ただし互換性の関係上、普及には時間がかかります。

とにかく、興味があれば見てください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。