移动开发适配

常见移动web适配方法

12345

PC 端与移动端适配的区别

移动web:

定高，宽度百分比；

flex + 媒体查询布局

pc端布局一般采用定宽，居中，盒子模型，定高，定宽，多用display：inline-block.

移动web 定高，宽度百分比。采用flex加媒体查询布局

移动web适配方法：

PC：960px/1000px 居中；

盒子模型，定高，定宽；

display:inline-block;

移动web:

定高，宽度百分比；

flex;

medis query(媒体查询)；

display:inline-block 属性让DIV可以横着排（DIV 默认对是竖着一个个的排）

响应式布局

移动web适配

常见适配方法

11111111

一、pc适配方法

1、960/1000px居中

2、盒子模型（CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容），定高，定宽

3、display: inline-block

二、移动适配

1、定高，宽度百分比

2、flex。

3、media query(媒体查询)

web浏览器

1、960/1000px center

2、盒子模型 定宽定高

3、inline-block

移动web

1、media query（媒体查询）
2、flex

常见布局适配方案

常见的移动web适配方法：PC 给一个固定的宽度啦

或者用盒子模型 定高，定宽等等 

又或者 display：inline——block 

移动web 定高 flex 布局法 media query媒体查询法

常见移动web适配方法

常见移动web适配方法

PC：

• 960px / 1000px 居中

• 盒子模型、定高、定宽

• display:inline-block

移动web:

• 定高、宽度百分比

• flex

• media query (媒体查询)