2024年自适应网页设计几个(3篇)

自适应网页设计几个 第1篇

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {font-size: ; }

然后，h1的大小是默认大小的倍，即24像素（24/16=）。

small {font-size: ;}

small元素的大小是默认大小的倍，即14像素（14/16=）。

自适应网页设计几个 第2篇

_流动布局_的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

自适应网页设计几个 第3篇

_自适应网页设计_到底是怎么做到的？其实并不难。

首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用。