【HTML+CSS】移动端布局之流式布局

学习视频及笔记参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

---

 一、移动端基础

1、视口

• 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
• 布局视口 layout viewport：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• 视觉视口 visual viewport：用户正在看到的网站的区域。
• 理想视口 ideal viewport：添加meta视口标签，其主要目的是让布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我 们布局的视口就多宽。

2、二倍图

• 在PC端页面，1px 等于1个物理像素，但是移动端不一定，因此存在图片在移动端模糊的问题。用多倍图来解决。
• 1px能显示的物理像素点的个数，称为物理像素比。
• 如果要显示 50px * 50px 的图像，我们首先先准备 100px * 100px 的高清图（以二倍图为例）。其次将图片缩小为 50px * 50px 。

img{
    /*原始图片100*100px*/
    width: 50px;
    height: 50px;
} 

.box{
    /*原始图片100*100px*/
    background-size: 50px 50px;
}

二、移动端技术解决方案

1、CSS初始化 normalize.css

• 作用：保护了有价值的默认值；修复了浏览器的bug；是模块化的；拥有详细的文档。
• 官网地址： http://necolas.github.io/normalize.css/

三、流式布局

1、 基础知识

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式。
• max-width 最大宽度 （max-height 最大高度）。
• min-width 最小宽度 （min-height 最小高度）。

2、案例：京东移动端首页

2.1 实现的界面