フロントエンドレイアウト（個人使用）

フロントエンドのレイアウト

1. アダプティブ

自己適応は一連のコードです。画面サイズがどんなに変化しても、ページ上の要素のサイズのみが変化します。表内の 3 列から 2 列への変更はありません。応答性が高く、私はあまりに面倒なので、リーダーやデザイナーがページを変更させようとして来るたびに、それはアダプティブ ウィンドウの変更だと言いましたが、その結果、3 つの列を 2 つの列に変更する必要がありました。見た目、変更方法、絵をデザインする必要はありません、ただ空想しているだけです、めんどくさいです...

レスポンシブ Web サイト: m.ctrip.com/html5/

方法：

• フレックスレイアウトを使用する
• 使用率
• デッド幅と高さの書き込みを避ける
• スクロールバーを追加する
• レムを使う
• ...

2. レスポンシブ対応

これは、携帯電話、パッド、PC 用のコードのセットであり、異なるスタイルがロードされるたびに、1 つのプロジェクト内ですべて互換性が得られます。これはレスポンシブと呼ばれます。私はデザインの仕事をして最終的に「見た目が良くない」などと言うような意味のないデザインはやりたくないのです。

レスポンシブ Web サイト: www.microsoft.com/zh-cn/

3. モバイル端末の一般的な幅と高さ

幅高さ	割合
320×480	(2:3)
480×854	(ヨハネ 9:16)
480×800	(3:5)
480×640	(3:4)
540×960	(9:16)
600×1200	(1:2)
600×1024	(75:128 9:16頃)
640×960	(2:3)
640×1136	(40:71 9:16頃)
720×1280	(9:16)
768×1024	(3:4)
800×480	(5:3)
800×1280	(5:8)
1080×1920	(9:16)
1536×2048	(4:3)
1600×2560	(5:8)

縦型画面の一般的なアスペクト比: 1:2、2:3、3:4、3:5、5:8、9:16

横画面の一般的なアスペクト比: 4:3、5:3

別紙：スマートフォンの画面サイズと解像度一覧

寸法（インチ）	解決	画素密度
3.5 (アップル iPhone4)	960×640(DVGA)	326ppi
3.7	800×480(WVGA)	252ppi
3.7	800×480(WVGA)	252ppi
3.7	960×540(qHD)	298ppi
4.0	800×480(WVGA)	233ppi
4.0	854×480(WVGA)	245PPI
4.0	960×540(qHD)	275ppi
4.0 (アップル iPhone5)	1136×640(HD)	330PPI
4.2	960×540(qHD)	262ppi
4.3	800×480(WVGA)	217ppi
4.3	960×640(qHD)	268PPI
4.3	960×540(qHD)	256PPI
4.3	1280×720(HD)	342PPI
4.5	960×540(qHD)	245PPI
4.5	1280×720(HD)	326PPI
4.5	1920×1080(FHD)	490PPI
4.7	1280×720(HD)	312PPI
4.7	1280×720(HD)	312PPI
4.7	1280×720(HD)	312PPI
4.8	1280×720(HD)	306PPI
5.0	480×800(WVGA)	186PPI
5.0	1024×768(XGA)	256PPI
5.0	1280×720	294PPI
5.0	1920×1080(FHD)	441PPI
5.3	1280×800(WXGA)	285PPI
5.3	960×540(qHD)	207PPI
6.0	854×480	163PPI
6.0	1280×720	245PPI
6.0	2560×1600	498ppi
7.0	800×480(WVGA)	128PPI
7.0	1024×600	169PPI
7.0	1280×800	216PPI
9.7	1024×768(XGA)	132ppi
9.7	2048×1536	264PPI
10	1200X600	170ppi
10	2560×1600	299ppi

1.百分比布局

窗口的hight和width改变的时候，通过给 height、width 、padding、border、margin等 属性都是依托父组件的宽高（margin 和 padding 都可以使用百分比值的形式，但有一点可能和通常的想法不同，就是 margin-top、margin-bottom、padding-top、padding-bottom的百分比值参照的不是容器的高度，而是父级容器的宽度）

• 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。

• 子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。border-radius 为百分比，则是相对于自身的宽度

缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位

2、媒体查询布局

通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

语法: @media mediatype and not only (media feature) { css-code; }

js

   
  //也可以针对不同的媒体使用不同的stylesheets:
    <link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css">
    
    <link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
    
   <!--上面将浏览器宽度小于等于80px时，应用 styleA 。-->
    

css引用

    @media screen and (max-device-width:960px){
      body{background:red;}
  }

参考文档：blog.csdn.net/caseywei/ar…

www.w3cplus.com/content/css…

css.doyoe.com/

链接：blog.csdn.net/u010510187/…

常用的响应断点阈值设定

括号后面是样式的缩写
<576px （Extra small）
>=576px （Small --- sm）
>=769px （Medium --- md）
>=992px （Large --- lg）
>=1200px （X-Large --- xl）
>=1400px （XX-Large ---- xxl）

@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。

3.rem 响应式布局

rem通常用来适配移动端，按照视口将页面分成10份。

比如现在有 5 个同尺寸的屏幕 （750 640 480 375 320），所有屏幕整体宽分成 10rem 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。

屏幕尺寸	html中font-size 大小(1rem 大小)
750px	75px
640px	64px
480px	48px
375px	37.5px
320px	32px

flexible.js 插件也可以解决

em と rem は似ており、どちらもフォント サイズに基づいてページ レイアウトを拡大縮小しますが、em は主に直接の親のフォント サイズのサイズに依存し、HTML 全体には直接依存せず、最も近い親のみを検索します。ルートタグ

3. vw、vh レスポンシブ レイアウト

100vw = 100 ビュー ウィンドウの幅、100vh = 100 ビュー ウィンドウの高さであるため、750 のデザイン ドラフトによれば、100vw は 750 です。その場合、1vw は 7.5px です。

画面サイズ	1vw
750ピクセル	7.5ピクセル
640ピクセル	6.4ピクセル
480ピクセル	4.8ピクセル

4. フレックスエラスティックレイアウト

flex-direction 、 flex-wrap 、 justify-content 、 align-items 、 align-content 子元素：order 、 flex-grow 、 flex-shrink 、flex-basis 、 align-self

4. 聖杯レイアウトと両翼レイアウト

ダブルウィングレイアウト

左右の列の幅は一定で、中央の列の幅はブラウザ ウィンドウのサイズに応じて適応されます。

聖杯のレイアウト

両翼レイアウトと同様に、左右の列の幅は一定で、中央の列の幅はブラウザ ウィンドウのサイズに応じて適応されますが、より完成度が高くなります。