什么是自适应布局?
自适应布局简而言之,就是一个网站或者一个页面能适应兼容多个终端设备,而不需要再为每个终端做一个特定的版本。其实简单来讲自适应与非自适应的不同就是一个页面不管在什么设备的分辨率下都能自动识别适应,为浏览的用户带来了更好的体验效果。
怎么样才能快速制作一个自适应网页?
1、首先,在网页代码的头部,加入一行viewport元标签。
2、由于网页会根据屏幕宽度调整布局,所以不能使用宽度的布局,也不能使用具有宽度的元素。
3、“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。Float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
4、“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。