移动Web——弹性布局

一. 移动端的特点

1. PC端和移动端的区别：

        PC屏幕大，网页有固定版心，手机屏幕小，网页宽度多数为100%。

2. 分辨率

        ①物理分辨率：是生产屏幕时固定的，他是不可被改变的。

        ②逻辑分辨率：由软件驱动决定的。

3. 视口（了解即可，代码会自动生成）

        作用：让网页的宽度等于设备宽度，制作配饰不同的设备网页。

        *注意：PC端视口默认100%；没视口标签时屏幕默认尺寸是980评选。

<meta name="viewport" content="width=device-width" initial-scale=1.0>
 <!-- 视口标签 -->

  viewport表示视口， width=device-width：视口宽度 = 设备宽度 ， initial-scale=1.0：缩放1倍。

 

---

二. flex弹性布局（也叫伸缩布局）

 1. 概念：

        flex布局（弹性布局）