応答式web設計コードの実現について
応答式を研究する時、いくつかの感想を記録して、分かち合って、レンガを投げて玉を引いて、みんなと一緒に討論することを望んでいます.まとめると,応答式は以前想像していたよりずっと複雑である.
1.ie 9以下(ie 9を除く)ie条件注釈を採用し、ie 8及び以下に単独でスタイルファイルを開く
2.一つのモジュールのmqスタイルは全体的にこのモジュールのスタイルの後に置いて、積層論理に合致し、同時に積層されないようにする.
3.対応する点で同時に変化することを祈ることはほとんど不可能です.レイアウトの中間の変化は、視覚的にも具体的な符号化者にもすべての詳細を把握することはできません.
4.流体レイアウトが重要、%親を参照物とする点は多くの人が知っているが、実際にやっているときに最も無視されやすい.
5.フローティングをクリアすることも重要です.覚えておいてください.
6.枠線、余白(内、外)も100%の範囲でwidth:autoを直接設定すればいいので、新しいcss 3属性に希望を与えず、-webkitに希望を寄せないでください.-webkit-は簡単に次のie 6になります.
7.現在の要素marginまたはpaddingを設定する代わりに、合理的なネストがより丈夫になります.例えば、AとBの2つの要素がある場合、widthは40%、maring-rightは10%であり、ブラウザを検索する際に改ざんしやすいため、1つの包装要素CでAとBをそれぞれ包み、Cに50%、AとBに80%を設定する.これが合理的で丈夫なネストです.
8.2行2列この設計は、流体レイアウトと文字数の違いにより、各行に1つの包装要素を追加し、より丈夫にします.つまり、まず2行を作ってから、各行に2列を作ってください.
9.各画素の幅において、ページが各画素の幅においてどのように表現されているかを誰も知らないため、各画素の幅においてページがどのように表現されているかを期待しないでください.ページが責任を負うほど、予想されるほど正確ではありません.したがってmqは本当に「予想外の数値」(予想値は設計と実現前に約束された応答点を指す)である可能性がある.
10.同じ区間のmqとmqは積層され、グローバルなスタイルもmqのスタイルと積層されるので、属性はできるだけ略語に書かないでください.忘れるリスクを減らす.
11.画像の適応処理は容易ではありません.特に枠がある場合は、通常の条件(mqで拘束されていない)で幅と高さを設定し、別のmqでは、1つの属性を設定するだけではだめです.それとも、その文では、mqは2つの異なるmq区間ではなく、積層です!!
12.水平リストの両端の要素が揃えられ、4つの要素を例にとると、最初の3つの左余白を除いて、最後の1つはゼロになります.または最初の右側の根拠は0です.後ろの3つは右から離れています.最初の左側にあり、最後の右側にあり、中間の2つの左右のオフセットエッジを採用することができます.短い面はエッジを空白数で割って、例えば4つのリスト項目、エッジを40にして、40を3で割ってください.メリットは?つまり、各外装が全欄の25%であることを保証することができます.
13.4個25%、2個50%は大丈夫ですが、50%25%25%は最後の1個に落ちる可能性があるので、24.99、22.49は1~2画素差があることもあります.
14.レイアウトが大きく変化しない場合、大きいものから小さいものまでmqを書くには、1つの区間を書く必要はなく、最大値だけを書くようにして、1層1層の継承、小さいサイズは大きいサイズを継承し、また、セレクタ自体の重みの問題を過度に心配することなく、mqはその優先度を高める.
15.ナビゲーションや著作権のようなpc、pad、phoneではまったく異なるレイアウト.mq、区間を書きます.これにより、区間外ではこれらのdomにスタイルがないことに等しく、継承による上書き、優先度、書き換え、未知の問題を心配することはありません.属性の書き換えを低減し、効率を向上させ、修正コストを低減します.実は1つのdomに等しく、異なるデバイスのために異なるスタイルを書き、これらのスタイルの間には継承されません.
16.いくつかの要素が相対的な位置に変化しないことを望む場合は、彼らを包んで、この小包要素を通じて彼ら全体を他の要素または要素グループとレイアウトします.そのため、丈夫な応答式はこれらの「冗長」に見える小包要素から離れられません.しかし、目標を達成できるdomレベルを最小限に抑えることを目標としている.
17.背景図については、中心を原点として「切り取り」を行うのが理性的で、すでにある側を原点としているのがおかしいように見えます.またbackground-sizeの値がautoで、もう1つが%
18.大きな画像は1つのmq区間に書いてください.最大値だけ書かないでください.そうすれば、オンデマンドロードの問題が解決します.
19.bannerスタイルの実践
20.ロゴはbannerの背景図に透かしてある場合はお勧めしません.ブラウザのウィンドウ幅を狭めると、明らかに視覚的な差があり、ページが極めて丈夫ではない(少なくとも私の感覚はそうである)と感じ、いつでも散らばっているような感じがします.文字もこのような感じがして、特に大量の文字があるとき.応答性の良いサイトがたくさんあります.彼のナビゲーションのベースカラーは純色です.ロゴもナビゲーションも背景図に透かしません.もちろんadobeのような少数の人もいます.
21.20に続いて、一般的なbanner画像はほとんど満画面の可能性が1980 pxに達する.一般的に中央に位置すると、ナビゲーションやlogoなどの小さな機能、例えばログイン、検索を1200 pxの最大幅に制御し、ページがこの最大幅より大きい場合、この領域は背景図に釘付けになっているようで、2つのレイヤーがあるような感じはしません.だからページ幅がすぐに最大幅に等しいとき、私たちはmqを利用して次の領域の最大幅を再記述して定義しています.もちろん小さいほうがいいです.そうすれば、20の問題を解決します.
22.png 8の質問ですが、ie 6では純色で底を作りましょう.私の最も理想的な考えは、ie 6ですべての会社のweb製品にアクセスするとき、ユーザーにページをあげて、まずQQアカウントにログインして、それから最新のQQブラウザをダウンロードして、それからこのユーザーに10個のQ貨幣を送ります.そしてブラウザ界は静かになった.
23.次に、現在のmqのこの領域の最大幅は、次の(より小さいサイズ)mqのサイズに等しく、これにより、ユーザの釘が背景図の上に釘付けになる.
24.同じ要素に対して、nth-of-typeセレクタを優先的に使用する特殊なスタイルがある.ie 8をテストしてから、この特殊なdomにclassなどを追加し、そのie 8と次のスタイルシートにコピー応答のルールを書きます.
25.bodyの下にパッケージ要素があり、全体の弾力性の参照としてie 6、ie 7のために単独で幅を書く.なぜ1000 pxなのか、ie 6を使用するユーザーの解像度を得るのは難しい.あるいは、取得した後、データが多くて意思決定が悪いため、簡単で乱暴で、ie 6を使用するのはローエンドデバイスユーザーであり、小さなディスプレイユーザーであり、1024*768解像度であると考えている.ie 7については、4つの25%のフローティングを設定し、ブラウザを縮小する過程で時々1つ落下することができ、小数点の画素が自動的に補完されるのは悲しい.次のようになります.
26.必ず100%のコラムを必要とするモジュール、例えば背景色の著作権、あるいはbannerについては、lt 9のフォルダにie 7 6のために1000 pxではなく100%のスタイルを書くことができますが、ここに1列あれば、25で言及された問題が発生することを覚えておいてください.
だから、banner本体の著作権の一部を3つのlayoutで包むことをお勧めします.ie 6 ie 7 ie 8のスタイルを簡単にすることができます.
27.半年にわたる継続統計によると、1366 pxユーザーが最も多く、グリッド化によると、n=24を基準としてW=(A*n)-iとなるため、最大幅を設定する場合は1310 pxとする.a=45px,i=10px;しかし、ポータルや電子商取引などのサイトのレイアウトとは異なり、主に弾力性のあるレイアウトのため、ここの最大幅は私たちが必要としているもので、45 pxと10 pxについては、後で固定レイアウトがあれば使用できます.
28.応答点:1366 px 1200 px 1110 px 768 px 568 px 414 px 320 px;768以下はよく理解できて制約も便利で、PC側の応答点は制御しにくいので、前の3つの値は基本的にレイアウトに従って操作されています.理由は3を参照してください.
29.ある人は応答式を書くのは小さい頃から大文字だと言って、意味は先に携帯電話の端を書いて、それからPCの端を書くと言って、大体の原因は大きいから小さいまで書くと、携帯電話は多くのスタイルを積層して書き換えるので、性能に影響する可能性があります.理論的には、私は賛成ですが、実際には性能がどれだけ影響しているかをテストしたことがありません.しかし単にレイアウトの角度から言えば、設計の角度から言えば、少なくとも私の論理は大きいから小さいまで書いて、小さい基本はすべて大きい基礎の上で削減とレイアウトの変化をするので、書く時論理は比較的にスムーズです.でも大きいから小さいまで、小さいから大きいまで、自分で好きなようにすればいいです.一般的に視覚はまずPCを設計して、それからmobileがどんなものかを考えて、この点も私に大きいから小さいまで書きます.
30.前に黄先生は私に、応答式の難点は設計上なのか技術上なのかと聞いた.私は当時、技術上は何もないと言っていたが、肝心なのはレイアウトの変化と設計の体験だった.今考えてみましょう.レイアウトの変化は難点であるが,技術的手段も重要であり,この面での深さと方式の選択はレイアウト上の選択よりも複雑である.
31.応答式の3つの技術:流体、mq、弾性画像.
以上はすべて個人の経験で、どうしても一方的で、討論を歓迎します.
1.ie 9以下(ie 9を除く)ie条件注釈を採用し、ie 8及び以下に単独でスタイルファイルを開く
1
2
3
<!--[if lt IE 9]>
<link href="lt9.css" rel="stylesheet" type="text/css">
<![endif]-->2.一つのモジュールのmqスタイルは全体的にこのモジュールのスタイルの後に置いて、積層論理に合致し、同時に積層されないようにする.
3.対応する点で同時に変化することを祈ることはほとんど不可能です.レイアウトの中間の変化は、視覚的にも具体的な符号化者にもすべての詳細を把握することはできません.
4.流体レイアウトが重要、%親を参照物とする点は多くの人が知っているが、実際にやっているときに最も無視されやすい.
5.フローティングをクリアすることも重要です.覚えておいてください.
6.枠線、余白(内、外)も100%の範囲でwidth:autoを直接設定すればいいので、新しいcss 3属性に希望を与えず、-webkitに希望を寄せないでください.-webkit-は簡単に次のie 6になります.
7.現在の要素marginまたはpaddingを設定する代わりに、合理的なネストがより丈夫になります.例えば、AとBの2つの要素がある場合、widthは40%、maring-rightは10%であり、ブラウザを検索する際に改ざんしやすいため、1つの包装要素CでAとBをそれぞれ包み、Cに50%、AとBに80%を設定する.これが合理的で丈夫なネストです.
8.2行2列この設計は、流体レイアウトと文字数の違いにより、各行に1つの包装要素を追加し、より丈夫にします.つまり、まず2行を作ってから、各行に2列を作ってください.
9.各画素の幅において、ページが各画素の幅においてどのように表現されているかを誰も知らないため、各画素の幅においてページがどのように表現されているかを期待しないでください.ページが責任を負うほど、予想されるほど正確ではありません.したがってmqは本当に「予想外の数値」(予想値は設計と実現前に約束された応答点を指す)である可能性がある.
10.同じ区間のmqとmqは積層され、グローバルなスタイルもmqのスタイルと積層されるので、属性はできるだけ略語に書かないでください.忘れるリスクを減らす.
11.画像の適応処理は容易ではありません.特に枠がある場合は、通常の条件(mqで拘束されていない)で幅と高さを設定し、別のmqでは、1つの属性を設定するだけではだめです.それとも、その文では、mqは2つの異なるmq区間ではなく、積層です!!
12.水平リストの両端の要素が揃えられ、4つの要素を例にとると、最初の3つの左余白を除いて、最後の1つはゼロになります.または最初の右側の根拠は0です.後ろの3つは右から離れています.最初の左側にあり、最後の右側にあり、中間の2つの左右のオフセットエッジを採用することができます.短い面はエッジを空白数で割って、例えば4つのリスト項目、エッジを40にして、40を3で割ってください.メリットは?つまり、各外装が全欄の25%であることを保証することができます.
13.4個25%、2個50%は大丈夫ですが、50%25%25%は最後の1個に落ちる可能性があるので、24.99、22.49は1~2画素差があることもあります.
14.レイアウトが大きく変化しない場合、大きいものから小さいものまでmqを書くには、1つの区間を書く必要はなく、最大値だけを書くようにして、1層1層の継承、小さいサイズは大きいサイズを継承し、また、セレクタ自体の重みの問題を過度に心配することなく、mqはその優先度を高める.
15.ナビゲーションや著作権のようなpc、pad、phoneではまったく異なるレイアウト.mq、区間を書きます.これにより、区間外ではこれらのdomにスタイルがないことに等しく、継承による上書き、優先度、書き換え、未知の問題を心配することはありません.属性の書き換えを低減し、効率を向上させ、修正コストを低減します.実は1つのdomに等しく、異なるデバイスのために異なるスタイルを書き、これらのスタイルの間には継承されません.
16.いくつかの要素が相対的な位置に変化しないことを望む場合は、彼らを包んで、この小包要素を通じて彼ら全体を他の要素または要素グループとレイアウトします.そのため、丈夫な応答式はこれらの「冗長」に見える小包要素から離れられません.しかし、目標を達成できるdomレベルを最小限に抑えることを目標としている.
17.背景図については、中心を原点として「切り取り」を行うのが理性的で、すでにある側を原点としているのがおかしいように見えます.またbackground-sizeの値がautoで、もう1つが%
18.大きな画像は1つのmq区間に書いてください.最大値だけ書かないでください.そうすれば、オンデマンドロードの問題が解決します.
19.bannerスタイルの実践
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media (min-width:1110px){
.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}
}/* ， ， */
/* ， k ， */
@media (min-width:769px) and (max-width:1110px){
.banner{height:383px; background:url(img/banner1110.jpg) center center;}
}
@media (min-width:569px) and (max-width:768px){
.banner{height:265px; background:url(img/banner768.jpg) center center;}
}
@media (min-width:415px) and (max-width:568px){
.banner{height:196px; background:url(img/banner568.jpg) center center;}
}
@media (min-width:321px) and (max-width:414px){
.banner{height:143px; background:url(img/banner414.jpg) center center;}
}
@media (max-width:320px){
.banner{height:111px; background:url(img/banner320.jpg) center center;}
}20.ロゴはbannerの背景図に透かしてある場合はお勧めしません.ブラウザのウィンドウ幅を狭めると、明らかに視覚的な差があり、ページが極めて丈夫ではない(少なくとも私の感覚はそうである)と感じ、いつでも散らばっているような感じがします.文字もこのような感じがして、特に大量の文字があるとき.応答性の良いサイトがたくさんあります.彼のナビゲーションのベースカラーは純色です.ロゴもナビゲーションも背景図に透かしません.もちろんadobeのような少数の人もいます.
21.20に続いて、一般的なbanner画像はほとんど満画面の可能性が1980 pxに達する.一般的に中央に位置すると、ナビゲーションやlogoなどの小さな機能、例えばログイン、検索を1200 pxの最大幅に制御し、ページがこの最大幅より大きい場合、この領域は背景図に釘付けになっているようで、2つのレイヤーがあるような感じはしません.だからページ幅がすぐに最大幅に等しいとき、私たちはmqを利用して次の領域の最大幅を再記述して定義しています.もちろん小さいほうがいいです.そうすれば、20の問題を解決します.
22.png 8の質問ですが、ie 6では純色で底を作りましょう.私の最も理想的な考えは、ie 6ですべての会社のweb製品にアクセスするとき、ユーザーにページをあげて、まずQQアカウントにログインして、それから最新のQQブラウザをダウンロードして、それからこのユーザーに10個のQ貨幣を送ります.そしてブラウザ界は静かになった.
23.次に、現在のmqのこの領域の最大幅は、次の(より小さいサイズ)mqのサイズに等しく、これにより、ユーザの釘が背景図の上に釘付けになる.
24.同じ要素に対して、nth-of-typeセレクタを優先的に使用する特殊なスタイルがある.ie 8をテストしてから、この特殊なdomにclassなどを追加し、そのie 8と次のスタイルシートにコピー応答のルールを書きます.
25.bodyの下にパッケージ要素があり、全体の弾力性の参照としてie 6、ie 7のために単独で幅を書く.なぜ1000 pxなのか、ie 6を使用するユーザーの解像度を得るのは難しい.あるいは、取得した後、データが多くて意思決定が悪いため、簡単で乱暴で、ie 6を使用するのはローエンドデバイスユーザーであり、小さなディスプレイユーザーであり、1024*768解像度であると考えている.ie 7については、4つの25%のフローティングを設定し、ブラウザを縮小する過程で時々1つ落下することができ、小数点の画素が自動的に補完されるのは悲しい.次のようになります.
1
2
3
4
5
regular css file
.layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;}
lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8 1000px，ie7 6 1000px*/26.必ず100%のコラムを必要とするモジュール、例えば背景色の著作権、あるいはbannerについては、lt 9のフォルダにie 7 6のために1000 pxではなく100%のスタイルを書くことができますが、ここに1列あれば、25で言及された問題が発生することを覚えておいてください.
1
2
3
4
5
6
7
8
lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8 1000px，ie7 6 1000px*/
.one-percent{width:100%;}/* ， layout ， ie6 7 */
html dom
<div class="layout one-percent">
<!--code-->
</div>だから、banner本体の著作権の一部を3つのlayoutで包むことをお勧めします.ie 6 ie 7 ie 8のスタイルを簡単にすることができます.
27.半年にわたる継続統計によると、1366 pxユーザーが最も多く、グリッド化によると、n=24を基準としてW=(A*n)-iとなるため、最大幅を設定する場合は1310 pxとする.a=45px,i=10px;しかし、ポータルや電子商取引などのサイトのレイアウトとは異なり、主に弾力性のあるレイアウトのため、ここの最大幅は私たちが必要としているもので、45 pxと10 pxについては、後で固定レイアウトがあれば使用できます.
28.応答点:1366 px 1200 px 1110 px 768 px 568 px 414 px 320 px;768以下はよく理解できて制約も便利で、PC側の応答点は制御しにくいので、前の3つの値は基本的にレイアウトに従って操作されています.理由は3を参照してください.
29.ある人は応答式を書くのは小さい頃から大文字だと言って、意味は先に携帯電話の端を書いて、それからPCの端を書くと言って、大体の原因は大きいから小さいまで書くと、携帯電話は多くのスタイルを積層して書き換えるので、性能に影響する可能性があります.理論的には、私は賛成ですが、実際には性能がどれだけ影響しているかをテストしたことがありません.しかし単にレイアウトの角度から言えば、設計の角度から言えば、少なくとも私の論理は大きいから小さいまで書いて、小さい基本はすべて大きい基礎の上で削減とレイアウトの変化をするので、書く時論理は比較的にスムーズです.でも大きいから小さいまで、小さいから大きいまで、自分で好きなようにすればいいです.一般的に視覚はまずPCを設計して、それからmobileがどんなものかを考えて、この点も私に大きいから小さいまで書きます.
30.前に黄先生は私に、応答式の難点は設計上なのか技術上なのかと聞いた.私は当時、技術上は何もないと言っていたが、肝心なのはレイアウトの変化と設計の体験だった.今考えてみましょう.レイアウトの変化は難点であるが,技術的手段も重要であり,この面での深さと方式の選択はレイアウト上の選択よりも複雑である.
31.応答式の3つの技術:流体、mq、弾性画像.
以上はすべて個人の経験で、どうしても一方的で、討論を歓迎します.