漏刻有时数据可视化屏幕分辨率自适应PC端的概念

屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。

漏刻有时数据可视化大屏分辨率采用1920*1080px，16：9模式，即FHD（全高清）,当前最普及的分辨率。

FHD意思是全高清，即FULL HD，全称为Full High Definition。一般能达到分辨率1920*1080。FHD的意思就是全高清的意思，当你的片源达到1080P清晰度的时候，支持FHD分辨率输出的LCD电视机能够完整的表现。 --来源于百度百科

屏幕比例：
16:9 主要也是是HD电视在用的比例，是一种适合视频观赏和办公操作（容纳两个文档并排处理），各个生产商采用的黄金比例屏幕格式。

市场上常用笔记本

常见的PC屏幕尺寸（寸）：13.3，13.5，14, 15.6, 17
常见比例下的分辨率：
（16：9） 1366768 1600900 19201080 38402160
（16：10）1440900 25601600 28801800
（3:2） 21601440 22561504 30002000

CSS自适应规则如下：

在这里插入代码片   .example {
        padding: 20px;
        color: white;
    }
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .example {background: red;}
    }

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        .example {background: green;}
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        .example {background: blue;}
    }

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 1366px) {
        .example {background: orange;}
    }

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1400px) {
        .example {background: #000;}
    }``