移动web开发之流式布局（百分比布局）

移动WEB开发之流式布局

移动端基础

视口

视口：就是浏览器显示页面内容的屏幕区域，分为布局视口，视觉视口，和理想视口。

布局视口：layout viewport

设备的默认宽度（980px）
（不好，此宽度让移动端显示的事物物理大小过小，不容易分辨）

通过缩放去操作视觉窗口，不会影响布局，布局视口仍保持原来的宽度

理想视口：ideal viewport

最合适的设备的宽度（decive-width）
（同样px大小的事物，在PC端和移动端显示的物理大小相同）

meta视口标签:（设置viewport）

   <meta name="viewport" content="width=device-width" />

功能：设置设备的宽度
目的：让同样px大小的事物，在PC端和移动端显示的物理大小相同
注意：meta标签设置视口 只在移动端起作用 PC端不起作用

二倍图

在标准的viewport设置中，使用倍图来提升图片质量，解决在高清设备中的模糊问题。

（重要）使用二倍图

在移动端使用的图片都要使用二倍图（三倍图 四倍图）

如：需要展示100px200px的图片，就需要使用200色彩像素点400色彩像素点的图片，通过css代码缩放为100px*200px

img标签：
1、引入 200色彩像素点400色彩像素点 的图片
2、设置宽高（width、height）是100px200px

背景图：
1、通过背景图引入200px*400px的图片
2、使用background-size: 100px 200px;来缩放背景图;
注意：
background-size是background的分写属性，
所以先写background再写background-size

background-size

调整背景图片大小的方式：

（重要）二倍精灵图的使用
1）打开图片，把图片整体缩放为一半（保持宽高比）
2）测量局部小图：得到小图的宽高、位置
3）把测量出的宽高设置为盒子大小，修改背景位置为测量出的小图位置
4）使用background-size修改背景图的大小，为原始大小的一半

注意：测量前缩放图片时，一定要缩放整张图片，不要只缩放部分

移动端主流方案

对页面进行一定程度的初始化（不需要理解其中的代码，引入页面即可）

流式布局