Flex 布局（移动端特点、百分比布局）

1、移动端特点

1.1.PC端/移动端的不同

pc端

• 屏幕大,网页固定版心
• 端浏览器繁多,更多考虑兼容性问题。（布局:浮动+定位+标准流）

移动端

• 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
• 移动端则基本不需要考虑兼容性问题，放心大胆使用css新特性

1.2.物理分辨率和逻辑分辨率

1.物理分辨率：硬件所支持的，屏幕出厂就设定无法修改

2.逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率

1.3.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域

 视口的分类：

1.布局视口。IOS，Android基本都将这个视口分辨率设置为980px。

 2.视觉视口。用户正在看到的网站的区域

 3.理想视口。设备有多宽，我们的网页就显得有多宽

 1.4.视口标签

有了视口标签，可以达到我们想要的理想视口。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=