html自适应屏幕代码 如何用JS控制网页字体大小,使其能够自适应屏幕大小?
浏览量:3005
时间:2021-04-11 21:44:27
作者: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)。
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。