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

上周完成一个PC端的项目，对于我这样的小白来说，这个项目里面最大的问题就是，如何做到让HTML页面适应电脑的不同分辨率。
通过师傅的指导和自己查阅资料，最终成功适配不同的分辨率，完成了这个项目。
现在回头再来看这个项目，突然发现适配不同的分辨率真的非常简单。这里总结两种方法，跟大家分享一下。希望可以帮助大家快速完成自己的项目。

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

这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的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样式表。由此我们便完成了页面使用不同的分辨率。

二.采用媒体查询

媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。

如果你对媒体查询不熟悉，可以点击链接进行学习这一新特性。菜鸟教程-CSS3 @media 查询

这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多，毕竟这也是官方的做法。我们有两种使用媒体查询的方式。

1.根据不同的分辨率，引入不同的css样式表
这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。

<!-- 分辨率低于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">

2.在同一个css样式表中，根据不同的分辨率，写不同的css样式
这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。

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

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

三. 总结
以上的方法的思路大同小异，根据我自己的经历，给大家提出一些小的建议。

因为我在公司的电脑的分辨率是1440，所以一开始我实在1440分辨率下写得css样式表，然后在这个基础之上，去调整其他的分辨率。发现根据小分辨率样式去调整大分辨率样式比较简单。当然，也许你喜欢由大到小，这都无所谓，看个人兴趣。

--------------------- 
作者：fengzhenzhen8023 
来源：CSDN 
原文：https://blog.csdn.net/fengzhen8023/article/details/81281117

PC端页面适应不同的分辨率的方法 （转载）的更多相关文章

  1. PC端页面适应不同的分辨率的方法

    原文链接:https://www.jianshu.com/p/4850a7b22228 一.根据不同的分辨率,加载不同的CSS样式文件 这个方法的思路是,分别针对800.1280.1440.1600. ...

  2. PC端页面转换成手机端页面的分辨率问题的理解

    PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...

  3. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  4. (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

    (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:styl ...

  5. 移动端和PC端页面常用的弹出层

    我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...

  6. 让PC端页面在手机端显示缩小版的解决方法

    做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta  <meta name= ...

  7. PC端页面同比例缩放

    <meta name="viewport" content="width=1202"> //这行代码可以使PC端页面同比例缩放,不至于变形

  8. 新建pc端页面的模板

    pc端页面,要做兼容.新建pc端模板时,先要初始化浏览器的样式,我命名为reset.css @charset "utf-8"; /* 取消链接高亮 */ body,div,ul,l ...

  9. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

随机推荐

  1. Wireshark安装失败或找不到网络接口问题

    Wireshark安装失败或找不到网络接口问题 Wireshark捕获数据包,主要依赖Winpcap或Npcap组件.从Wireshark 3.0开始,Npcap代替了Winpcap组件,成为Wire ...

  2. Jmeter插件解释

    Jmeter插件解释 1.jp@gc - Actiive Threads Over Time:不同时间活动用户数量展示(图表)  2.jp@gc - AutoStop Listener :自动停止监听 ...

  3. java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver java.sql.SQLException

    今天下午一直想用netbeans连接数据库,结果就是来来回回碰到这两个问题. 我还在想,连接数据库并不是一个什么困难的事情啊,我都按照教程上一步一步做的,代码什么的都感觉很好,怎么就找不到类呢,怎么就 ...

  4. 基于线程池、消息队列和epoll模型实现并发服务器架构

    引言 并发是什么?企业在进行产品开发过程中为什么需要考虑这个问题?想象一下天猫的双11和京东的618活动,一秒的点击量就有几十万甚至上百万,这么多请求一下子涌入到服务器,服务器需要对这么多的请求逐个进 ...

  5. android中的简单animation(二)push up,push left,cross fade,hyperspace

    animation_2.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  6. Day4 - G - 确定比赛名次 HDU - 1285

    有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委员会不能直接获得每个队的比赛成绩,只知道 ...

  7. OLTP和OLAP区别详解

    Oracle属于OLTP类型,而gp数据库属于OLAP类型的.具体了解如下: 数据库系统一般分为两种类型,一种是面向前台应用的,应用比较简单,但是重吞吐和高并发的OLTP类型:一种是重计算的,对大数据 ...

  8. leetcode1162 As Far from Land as Possible

    """ Given an N x N grid containing only values and , represents water and represents ...

  9. （五）微信小程序的跳转

    我们在微信页面往往有点击一个图片就可以跳转的情况,接下来我们就学习一下这个功能 一  js版本--bindtap 实现跳转 1. 首先我们先写一个跳转的按钮(在index.wxml) <view ...

  10. servlet3.0的文件上传代码配置怎么写

    之前学习过xml配置servlet3.0的文件上传,但是变成code方式一直不知道怎么弄,相比较起来apache的文件上传配置和xml倒是没什么太大区别. 直接上代码:无需依赖,只要一个方法就好了cu ...