js屏幕自适应 如何用JS控制网页字体大小，使其能够自适应屏幕大小？

如何用JS控制网页字体大小，使其能够自适应屏幕大小？

1. 首先，在网页代码的标题中添加一行viewport meta标记。

Viewport是网页的默认宽度和高度。上面的代码行表示网页的默认宽度等于屏幕宽度（宽度=设备宽度），原始比例（初始比例=1）为1.0，这意味着网页的初始大小占屏幕面积的100%。

所有主流浏览器都支持此设置，包括IE9。对于那些旧浏览器（主要是IE6、IE7和IE8），CSS3是必需的-媒体查询.js.

2. 不要使用绝对宽度。因为网页根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用绝对宽度的元素。这个很重要。具体来说，CSS代码不能指定像素宽度：宽度：xxx px

仅百分比宽度：宽度：XX%或宽度：自动

3. 相对大小字体

字体不能使用绝对大小（PX），只能使用相对大小（EM）。

Body{

font:normal 100%Helvetica，Arial，sans-serif

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

H1{

font-size:1.5em

}]然后，H1的大小是默认大小的1.5倍，即24像素（24g16=1.5）。

Small{

font-size:0.875em

}

小元素的大小是默认大小的0.875倍，即14像素（14g16=0.875）。

js屏幕自适应 css让页面自适应 Js实现自适应布局

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。