JS制作手机端自适应缩放显示

JS制作手机端自适应缩放显示

示例一：

示例二：

示例三：

总结：

一.其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。

 

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

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

四. 流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。 　
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } 

五. 图片的自适应（fluid image） 除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

以上所述就是本文的全部内容了，希望大家能够喜欢。