フロントエンド開発におけるいくつかのレイアウトタイプの理解

1756 ワード

一、静的レイアウト(Static Layout)は、画面幅が調整されている場合、横方向と縦方向のスクロールバーを使用してマスクされた部分を調べる.ブラウザのサイズが具体的にいくらであれ、ウェブページのレイアウトは当時コードを書いたレイアウトに従って配置されるという意味です.
二、フレックスレイアウト(Elastc Layout)はCSS 3が導入したレイアウト方式であり、flex-flowはflex-directionとflex-wrap属性の略記方式であり、文法は以下の通りである.
flex-flow:||flex-direction:row(初期値)|row-reverse|column|column-reverse flex-wrap:nowrap(初期値)|wrap|wrap-reverse flex-directionは、弾性コンテナにおける弾性アイテムの配置方向を定義し、デフォルトはrow、すなわち行内方向(一般的には左から右へ)であるが、これは書き込みモードに関係することに注意する).flex-wrapは、フレキシブルアイテムがコンテナに含まれるように行を分解する必要があるかどうかを定義します.*-reverseは反対の方向を表します.両方を組み合わせたflex-flowプロパティは、main axisとcross axisの2つの方向における弾性容器の表示方法を決定します.
三、適応レイアウト(Adaptive Layout)はそれぞれ異なる画面解像度に対してレイアウトを定義する.静的レイアウトの一連と見なすことができる.簡単に言えば、ページ内の要素の位置は変化し、大きさは変化しない.
四、フローレイアウト(Liquid Layout)ページ要素の幅はスクリーンによって適切に調整される.表示される結果、ページ内の要素のサイズが変化し、位置が変化しません.これにより、画面が大きすぎるか小さすぎると、要素が正常に表示されません.
五、応答式レイアウト(Responsive Layout)1、たとえば、モバイル端末のWebサイトを作成する場合は、name=「viewport」名=ビューwidth=device-widthページ幅=デバイス幅(携帯電話の画面幅を取得すると理解できます)initial-scale-初期のスケールminimum-scale-ユーザーが縮小できる最小スケールmaximum-scale-ユーザーが縮小できる最大スケールuser-scalable-ユーザーが手動で拡大できるかどうか
2、各画面解像度の下にレイアウトスタイルがあり、位置が変化し、サイズも変化し、メディアクエリー(media query)メディアクエリーが応答レイアウトの核心となる.

は、例える360 pxよりも解像度の大きい端末にスタイル

を設定する.

 @media screen and(min-width:360px){
            #idName{
                border:1px solid red;
            }
        }

ipadとiphoneビューが互換性がある場合

/**ipad**/
  @media only screen and (min-width:768px) and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px) and (width:768px)

Angularレビュー(1)

hdu 5044 Tree