让用户自己控制网页字体的大小的css书写方法
2023-06-13 09:13:58 时间
现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你感到字太小,阅读有困难,在非标准浏览器中就无能为力了,所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小。
如何设定
1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用em方便地设大小了,比如你需要用12px,只要设1.2em。
body{
font-size: 62.5%;
}
h1{
fong-size: 1.4em;/* h1字的大小相当于14px */
}
2.body里字体尺寸设为75%,则字体尺寸=16px*75%=12px,1em相当于12px.
body{
font-size: 75%;
}
h1{
fong-size: 1.5em;/* h1字的大小相当于18px */
}
第一种方法更好些。
如果是英文网站的话,还可以设定为small、x-small......
当然这样一来,对页面的设计要求会高一些。
如何设定
1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用em方便地设大小了,比如你需要用12px,只要设1.2em。
body{
font-size: 62.5%;
}
h1{
fong-size: 1.4em;/* h1字的大小相当于14px */
}
2.body里字体尺寸设为75%,则字体尺寸=16px*75%=12px,1em相当于12px.
body{
font-size: 75%;
}
h1{
fong-size: 1.5em;/* h1字的大小相当于18px */
}
第一种方法更好些。
如果是英文网站的话,还可以设定为small、x-small......
当然这样一来,对页面的设计要求会高一些。
相关文章
- 如何根据ACPI规范来获取I/O APIC控制寄存器的地址
- 谷歌PageSpeed提示利用font-display控制网页字体可见性的加载和替换
- python-高级协程编程-协程的并发控制(一)
- oracle spatial sdo_buffer函数精度控制详解数据库
- [javaEE] 控制浏览器缓存资源详解编程语言
- 深入研究Oracle数据库控制文件(oracle数据库控制文件)
- 使用开源同步工具 Syncthing 控制你的数据
- 用爱车控制爱巢温度
- 小SQL Server日志文件大小控制(sqlserver日志大)
- Linux系统端口控制与权限管理(linux 端口 权限)
- Oracle内存消耗难控制(oracle内存消耗大吗)
- Redis缓存实现权限控制(权限控制的redis缓存)
- 借助Redis过期机制实现多线程控制(redis过期 多线程)
- 网页里控制图片大小的相关代码
- 使用脚本控制网页Table的显示隐藏(全代码)_AX
- js控制div及网页相关属性的代码
- asp.net中通过DropDownList的值去控制TextBox是否可编写的实现代码
- 用按钮控制iframe显示的网页实现方法
- 使用jQuery同时控制四张图片的伸缩实现代码
- Js实现网页键盘控制翻页的方法