漏刻有时数据可视化屏幕分辨率自适应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) 2160
1440 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;}
    }``

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页