前端自适应基础讲解与网页设计练习(html+css)

  介绍自适应：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局（页面元素位置发生改变），每个静态布局中，页面也随窗口大小的调整发生变化。也算是基础的静态布局中的一个系列。

1. 布局特点
      屏幕分辨率发生变化时，页面里面的元素位置会变化而大小不会变化。
2. 设计方法
      使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。

第一步：在网页代码的头部，都要加入一行viewport标签。浏览器默认都有一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值，此行代码就是页面宽度设宽度，缩放比例等，简单来说这一切基本都是为了适应手机端网页的浏览。

第二步：（注意）不使用绝对宽度，字体大小，用rem进行单位换算

 

 第三步：流动布局

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的可采用 flex float  gird布局方式