介绍自适应:自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变),每个静态布局中,页面也随窗口大小的调整发生变化。也算是基础的静态布局中的一个系列。
1. 布局特点
屏幕分辨率发生变化时,页面里面的元素位置会变化而大小不会变化。
2. 设计方法
使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。
第一步:在网页代码的头部,都要加入一行viewport标签。浏览器默认都有一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值,此行代码就是页面宽度设宽度,缩放比例等,简单来说这一切基本都是为了适应手机端网页的浏览。
第二步:(注意)不使用绝对宽度,字体大小,用rem进行单位换算
第三步:流动布局
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的可采用 flex float gird布局方式