pc项目自适应手机屏幕

最新推荐文章于 2024-06-28 21:22:19 发布

manda Liu

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量785

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/weixin_42398301/article/details/109603810

版权

设置meta标签属性

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

根据不同不同分辨率，加载不同css

方法一（通过js获取屏幕宽度）：

<script>
    // 分辨率大于等于1680，大部分为1920的情况下，调用此css
    if(window.screen.width >= 1680){
        document.write('<link rel="stylesheet" href="css/index_1920.css">');
    }
    // 分辨率再在1600-1680的情况下，调用此css
    else if(window.screen.width >= 1600){
        document.write('<link rel="stylesheet" href="css/index_1600.css">');
    }
    // 分辨率小于1600的情况下，调用此css
    else{
        document.write('<link rel="stylesheet" href="css/index.css">');
    }
</script>

方法二（通过@media特性）：

<!-- 分辨率低于1280，采用test-01.css样式表 -->
<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css">
<!-- 分辨率高于1400，采用test-02.css样式表 -->
<link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">

在同一个css样式表中，根据不同的分辨率，写入不同的css样式

<style media="screen">
    /*分辨率低于1280，采用下面的样式*/
    @media screen and (max-device-width:1280px){
       
    }

    /*分辨率高于1440，采用下面的样式*/
    @media screen and (min-device-width: 1440px){
       
    }
</style>