2016 - 2024

感恩一路有你

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

浏览量:2783 时间:2021-04-14 04:24:20 作者:admin

如何用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实现自适应布局

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