一、自适应

自适应就是一套代码，不管屏幕大小怎么变化只有页面的元素大小的变化，不会出现表格三列变两列的样子，那种是响应式，烦死了每次领导和设计都跑过来让我修改一个页面说是自适应窗口的变化，结果要求三列变两列，什么这个按钮那个按钮隐藏一下改个样子，怎么改啊，你不需要设计出图嘛，我自己幻想嘛，烦死了....

方法：

  • 使用felx布局
  • 使用百分比
  • 避免写死宽高
  • 添加滚动条
  • 使用rem
  • ...

二、响应式

就是手机、pad、pc一套一种代码，每次加载不同的样式，都在一个项目里面做的兼容，这种才叫响应式。希望做产品的都睁睁眼行不行，我不想把设计的活也做了，最后还说怎么感觉不好看啊，废话我又不是做设计的。

响应式网站

三、移动端常见的宽高

宽 高

比例

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;}
  }

常用的响应断点阈值设定

括号后面是样式的缩写

<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类似，都是依据font-size进行页面布局缩放，但是em多依赖于直接亲父级font-size的大小，只会找最近的父级，不直接依赖于整体的html根标签

3.vw、vh 响应式布局

因为 100vw = 100视图窗宽度 ，100vh = 100 视图窗高度，那么按照750的设计稿100vw就是750.那么1vw就是7.5px

屏幕尺寸

1vw

750px

7.5px

640px

6.4px

480px

4.8px

4. flex 弹性布局

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

四、圣杯布局和双飞翼布局

双飞翼布局

左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。

圣杯布局

同双飞翼布局一样，左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应，不过更加完整。

CRMEB v4 全开源电商系统，开发者首选

基于ThinkPhp6.0+uniapp 开发的客户管理加电商营销的新零售商城系统。能够真正帮助企业基于微信公众号H5、小程序、wap、pc、APP等，实现会员管理、数据分析,精准营销的电子商务管理系统。可满足企业新零售、批发、分销、预约、O2O、多店等各种业务需求。CRMEB的优势:快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护；