<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media only screen and (min-width: 374px) {
html {
font-size: 60.5% !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 62.5% !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 92.5% !important;
}
}
html {
font-size: 62.5%;
}
#test {
font-size: 1.6rem;
}
</style>
<script type="text/javascript">
window.onload = function() {
使用@media媒体查询实现多设备字体图片自适应
最新推荐文章于 2024-08-20 11:47:23 发布
@media媒体查询是实现多设备自适应布局的关键,通过调整不同设备的字体大小与结合rem单位,可以确保在不同设备上字体适配。同时,可以使用max-width和min-width设置响应式断点,根据屏幕宽度应用不同样式。多个媒体特性可以使用'and'组合,例如在600px到900px之间改变body背景色。
摘要由CSDN通过智能技术生成