泰州中小微企业基础网络应用服务商 承接泰州三市(泰兴,兴化,靖江)三区(海陵、姜堰、高港)中小企业PC端网站建设、手机网站、微信官网、微信小程序定制、网络营销策划推广,欢迎广大企业来电咨询相关业务!
网站首页 关于智搜 新闻中心 服务项目 客户案例 在线咨询 联系我们
 
PC端企业网站适应不同的分辨率的方法
    发布时间:2019-04-16 点击次数:594
 

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

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

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

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

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

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

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



这个时候,我们只需要在我们的HTML页面的<head></head>标签中,使用js,根据不同的电脑分辨率,加载不同的css样式表。注意这里的js一定要写在<head></head>标签里面,这样在加载页面内容之前,可以提前把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样式表。由此我们便完成了页面使用不同的分辨率。

作者:fengzhen8023

来源:CSDN

原文:https://blog.csdn.net/fengzhen8023/article/details/81281117

版权声明:本文为博主原创文章,转载请附上博文链接!


下一条:如何打造一个极简风格的企业网站 上一条:扬州首创电力设备有限公司2019.05.20升级日志

打印本页】 【关闭窗口】 
电话:0523-88060699 微信/QQ:672255211 手机:150 5233 3386 联系人:王海勤 网址:www.tzhxwl.com 网站备案/许可证:苏ICP备17031172号-3
地址:江苏省泰州市姜堰区罗塘街道光华路82号(中天清华园大酒店西侧500米)
业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站、英文外贸网站、教育培训门户、微信手机移动端开发、响应式网站建设、微信小程序定制、APP开发和其他类型网站定制等。
让每个泰州中小微企业实现互联网+ 智搜网络伴随中小企业一起成长