ページレイアウトとデバイスの適応

1.水平ページ内に垂直にdiv要素を集中しています

1>position:absolute;  (当页面出现滚动条的时候，用fixed)
    top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
2>position:absolute；
    top：50%；
        left:50%;
        translate:(-50%,-50%)

3>display:flex;
    justify-content:center;
        align-items:center;

2.固定左右のスクロール

div.left{
    width:200px;
        height:300px;
        background:#ff0;
        float:left;
}
div.right{
        height:300px;
        background:#f00
        overflow:hidden;
}

3.フライングウイング

div.left{
    width:200px;
        height:300px;
        background:#ff0;
        float:left;
}
div.right{
        width:200px;
        height:300px;
        background:#ff0
}
div.main{
   height:500px;
     background:#f00;
     overflow:hidden;    //可以触发bfc 块级格式化上下文 可以解决子元素浮动 父元素高度塌陷问题  渲染规则：浮动元素也参与高度计算
}

4.テキストおよびより

ドラフト設計は、表示装置320で640を必要とiPhone DPR 4以降：2
VW：装置1vw =パーセントの幅の幅の、Windowsのパーセンテージ
ドラフト設計640は、デバイス320上に表示される場合、1vwパーセント= 320ごとに、その1vw = 3.2px

REM：計算されたフォントサイズのhtmlタグ

EM：親要素の計算されたフォントサイズ

IE6両側号（表示に浮動素子へ：インライン）からIE6（オーバーフロー：隠された;フォントサイズ：0;）

3つのピクセル下画像ステー大きな問題（：表示-ブロック/垂直整列：トップIMG）の挿入デフォルトページ

ハイパーリンクは、絵がセットIMGとの国境にIEの国境問題を解決しますロード：なし。

图片垂直居中IMG（垂直整列：中央;）スパン（表示：インラインブロック;垂直整列：中央;オーバーフロー：隠された;幅：0;高さ：100％;）

モバイルソリューション1pxの2ピクセルの境界線を終了達成するために、スケーリングの問題を解決するときに表示されます

もし！DOCTYPE htmlの次IE8ボックスモデルは、ボックスモデルの奇妙な、奇妙な実際の幅をトリガする何が起こるか存在していないが、我々は（国境パディングは幅と高さで計算されます）幅/高さを設定高いです

ショーの代替コンテンツのタイトルがタイトルが何の絵か、間違ったパスが存在しないときのimg ALTタグやタイトル属性はSEOの最適化を助長している、ALTがあるときに、画像コンテンツ上のマウス

あなたは何からページを最適化する際にページが考慮されます書くのか？
1.ハイパーリンクのテキストがいくつかの小さな図はまた、Altキーを追加しても意味がありませんのために別のフラッシュアニメーションや画像ホットゾーン画像のALT及びタイトルは、追加する必要があります使用するのが最適である=「」タイトル=「」ピクチャー・インテグレーション（図スプライト）
2。明確なコード構造

ポインタイベント：なし;シールドマウスイベント

コンテンツは、透明領域と一緒に従うことを望んでいない場合は
RGBAの背景色で1（）の設定
2.ロケ背景とコンテンツを分離

ページレイアウトとデバイスの適応

おすすめ