使用@media媒体查询实现多设备字体图片自适应

最新推荐文章于 2024-08-20 11:47:23 发布

timelessmemoryli

最新推荐文章于 2024-08-20 11:47:23 发布

阅读量5.3k

点赞数

分类专栏： html+css/html5 文章标签： media 媒体查询自适应多设备

本文链接：https://blog.csdn.net/u014788227/article/details/69229909

版权

@media媒体查询是实现多设备自适应布局的关键，通过调整不同设备的字体大小与结合rem单位，可以确保在不同设备上字体适配。同时，可以使用max-width和min-width设置响应式断点，根据屏幕宽度应用不同样式。多个媒体特性可以使用'and'组合，例如在600px到900px之间改变body背景色。

摘要由CSDN通过智能技术生成

<!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() {