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