zoukankan      html  css  js  c++  java
  • 根据不同的分辨率,加载不同的CSS样式文件

    根据不同的分辨率,加载不同的CSS样式文件

    这个方法的思路是,分别针对800、1280、1440、1600、1920等分辨率,创建不同的css文件。然后在各种分辨率下,写css样式表。

    可能你会感觉针对一个页面,要写这么多不同的css样式表,这个工作量肯定很大。其实也不尽然,根据我在这个项目中的实践,发现这个工作量其实是比较小的。

    首先,我们在做项目的时候,一般情况下会有一些范围限制,比如这个项目只需要适配1280~1920分辨率即可。而且各个分辨率之间,我们有的时候只是对页面上的元素进行宽高、尺寸、位置等进行调整,整体的一个框架是相似或者说是相同的。

    不仅如此,有的时候项目的要求不高,没有比较1:1高度还原设计稿,那么这个时候,我们在1440分辨率下的样式表,在1280分辨率下也是实用的,这个时候,我们的工作量又进一步减少。

    这个时候,我们可以先完成一个分辨率下的css样式表。然后在这个基础之上,对其他分辨率进行调整即可。这个过程我们只需要调整一些参数即可。

    比如在我的项目里面,这对不同的分辨率,我只做了三个样式表
    样式表

    这个时候,我们只需要在我们的HTML页面的标签中,使用js,根据不同的电脑分辨率,加载不同的css样式表。注意这里的js一定要写在标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来

    <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>
    

    这样的话,就可以根据不同电脑的分辨率,就在不同的css样式表。由此我们便完成了页面使用不同的分辨率。

    转载出处:
    作者:振礼硕晨
    链接:https://www.jianshu.com/p/4850a7b22228
    来源:简书

  • 相关阅读:
    程序员兄弟们,我们的基本素质怎么样?
    从GridView中直接导出数据到Excel文件 处理导出乱码 类型“GridView”的控件“XXXX”必须放在具有 runat=server 的窗体标记内。”的异常
    在SQLServer 2005附加SQLServer 2008数据库异常处理
    大型企业如何搭建私有云计算平台
    GIS在石油行业中的应用
    win7(windows 7)系统下安装SQL2005(SQL Server 2005)图文教程
    三维空间数据模型及结构
    oracle适配器连接不上解决方案
    单态设计模式
    java实现排序的几种方法
  • 原文地址:https://www.cnblogs.com/itzyz/p/13924389.html
Copyright © 2011-2022 走看看