精华内容
下载资源
问答
  • 屏幕分辨率排序
    2021-05-11 11:32:59
    • PC端:
      按屏幕宽度大小排序(主流的用加粗标明)
      分辨率( 比例 | 设备尺寸)
      1024 * 500 (8.9寸)
      1024 * 768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; )
      1280 * 800(16:10 |15.4寸)
      1280 * 1024(比例:5:4 | 14.1寸、15.0寸)

      1280 * 854(比例:15:10 | 15.2)
      1366 *768 (比例:16:9 | 不常见)
      1440 * 900 (16:10 17寸 仅苹果用)
      1440 * 1050(比例:5:4 | 14.1寸、15.0寸)
      1600 * 1024(14:9 不常见)
      1600 * 1200 (4:3 | 15、16.1)
      1680 * 1050(16:10 | 15.4寸、20.0寸)
      1920 * 1200(23寸)

    • 通过上面的电脑屏蔽及尺寸,得到了几个宽度:
      1024 1280 1366 1440 1680 1920

    更多相关内容
  • PC端************按屏幕宽度大小排序(主流的用橙色标明)分辨率 比例 | 设备尺寸1024*500 (8.9寸)1024*768 (比例4:3 |10.4寸、12.1寸、14.1寸、15寸; )1280*800(16:10 |15.4寸)1280*1024(比例:5:4 | 14.1寸、15.0...

    PC端************

    按屏幕宽度大小排序(主流的用橙色标明)

    分辨率   比例 | 设备尺寸

    1024*500 (8.9寸)

    1024*768 (比例4:3  | 10.4寸、12.1寸、14.1寸、15寸; )

    1280*800(16:10  |15.4寸)

    1280*1024(比例:5:4  | 14.1寸、15.0寸)

    1280*854(比例:15:10 | 15.2)

    1366*768 (比例:16:9 | 不常见)

    1440*900 (16:10  17寸 仅苹果用)

    1440*1050(比例:5:4  | 14.1寸、15.0寸)

    1600*1024(14:9  不常见)

    1600*1200 (4:3 | 15、16.1)

    1680*1050(16:10 | 15.4寸、20.0寸)

    1920*1200 (23寸)

    通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度

    1024       1280          1366      1440       1680       1920

    PC端响应式媒体断点

    @media (min-width: 1024px){body{font-size:18px}}/*>=1024的设备*/@media (min-width: 1100px){body{font-size:20px}}/*>=1100的设备*/@media (min-width: 1280px){body{font-size:22px;}}/*>=1280的设备*/@media (min-width: 1366px){body{font-size:24px;}}

    @media (min-width: 1440px){body{font-size:25px !important;}}

    @media (min-width: 1680px){body{font-size:28px;}}

    @media (min-width: 1920px){body{font-size:33px;}}

    用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

    展开全文
  • 最近在写一个PC端的活动页面,想让...所以本文章主要内容也就是向大家介绍css3属性 media响应式PC端媒体查询使用方法,以及对各主流电脑屏幕分辨率的尺寸进行总结,具有一定的参考价值,需要的朋友可以参考一下。CS...

    最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足。因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动条,内容不能全部展示。所以本文章主要内容也就是向大家介绍css3属性 media响应式PC端媒体查询使用方法,以及对各主流电脑屏幕分辨率的尺寸进行总结,具有一定的参考价值,需要的朋友可以参考一下。

    CSS3 @media 查询

    定义和使用

    使用 media查询,你可以针对不同的媒体类型定义不同的样式。

    media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面, media是非常有用的。

    当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    CSS语法

    @media mediatype and|not|only (media feature) { CSS-Code; }

    你也可以针对不同的媒体使用不同 stylesheets :

    媒体类型

    gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

    PC端

    按屏幕宽度大小排序(主流的用橙色标明)

    分辨率 比例|设备尺寸

    1024*500 (8.9寸)

    1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; )

    1280*800(16:10 |15.4寸)

    1280*1024(比例:5:4 | 14.1寸、15.0寸)

    1280*854(比例:15:10 | 15.2)

    1366*768 (比例:16:9 | 不常见)

    1440*900 (16:10 17寸 仅苹果用)

    1440*1050(比例:5:4 | 14.1寸、15.0寸)

    1600*1024(14:9 不常见)

    1600*1200 (4:3 | 15、16.1)

    1680*1050(16:10 | 15.4寸、20.0寸)

    1920*1200 (23寸)

    通过上面的电脑分辨率及尺寸的例表上我们得到了几个宽度

    1024 1280 1366 1440 1680 1920

    我们可在css样式中来写,也在不同屏幕下引入相应的样式。

    css样式

    @media screen and(min-width: 1024px){ body{font-size: 18px} } /*>=1024的设备*/

    @media screen and(min-width: 1100px) { body{font-size: 20px} } /*>=1100的设备*/

    @media (min-width: 1280px) { body{font-size: 22px;} }

    @media screen and(min-width: 1366px) { body{font-size: 24px;} }

    @media screen and(min-width: 1440px) { body{font-size: 25px !important;} }

    @media screen and(min-width: 1680px) { body{font-size: 28px;} }

    @media screen and(min-width: 1920px) { body{font-size: 33px;} }

    用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

    ie8兼容

    对ie低版本情况下不支持css3,这就是让前端头疼的事,但是不用急,有办法;

    html5.min.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。

    respond.min.js:让IE6-IE8等其他浏览器支持媒体查询

    上面的js我直接引的bootstrap的cdn脚本,大家也可以下载拷贝。

    /*屏幕大于1200排序(大屏幕电脑)*/

    @media screen and (min-width: 1200px){}

    /*屏幕在1024px到1199之间(中屏幕电脑)*/

    @media screen and (min-width: 1024px) and (max-width: 1199px){}

    /*屏幕在768px到1023之间(小屏幕-pad)*/

    @media screen and (min-width: 768px) and (max-width:1023px){}

    /*屏幕在480px到768之间(主要是手机屏幕)*/

    @media screen and (max-width: 768px){}

    这样就可以实现不同的屏幕适应不同的样式,实现自适应。

    另外在查资料时找到谷歌浏览器插件Window Resizer(火狐用户可以搜Firesizer)可以调用各种类型的分辨率尺寸查看效果

    展开全文
  • PC端按屏幕宽度大小排序(主流的用橙色标明)分辨率 比例 | 设备尺寸1024*500 (8.9寸)1024*768 (比例4:3 |10.4寸、12.1寸、14.1寸、15寸; )1280*800(16:10 |15.4寸)1280*1024(比例:5:4 | 14.1寸、15.0寸)1280*854...

    PC端

    按屏幕宽度大小排序(主流的用橙色标明)

    分辨率   比例 | 设备尺寸

    1024*500 (8.9寸)

    1024*768 (比例4:3  | 10.4寸、12.1寸、14.1寸、15寸; )

    1280*800(16:10  |15.4寸)

    1280*1024(比例:5:4  | 14.1寸、15.0寸)

    1280*854(比例:15:10 | 15.2)

    1366*768 (比例:16:9 | 不常见)

    1440*900 (16:10  17寸 仅苹果用)

    1440*1050(比例:5:4  | 14.1寸、15.0寸)

    1600*1024(14:9  不常见)

    1600*1200 (4:3 | 15、16.1)

    1680*1050(16:10 | 15.4寸、20.0寸)

    1920*1200 (23寸)

    通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度

    1024  1280  1366  1440  1680  1920

    PC端响应式媒体断点

    CSS代码

    @media (min-width: 1024px){

    body{font-size: 18px}

    } /*>=1024的设备*/

    @media (min-width: 1100px) {

    body{font-size: 20px}

    } /*>=1100的设备*/

    @media (min-width: 1280px) {

    body{font-size: 22px;}

    } /*>=1280的设备*/

    @media (min-width: 1366px) {

    body{font-size: 24px;}

    }

    @media (min-width: 1440px) {

    body{font-size: 25px !important;}

    }

    @media (min-width: 1680px) {

    body{font-size: 28px;}

    }

    @media (min-width: 1920px) {

    body{font-size: 33px;}

    }

    用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

    另外在查资料时找到 谷歌浏览器插件  Window Resizer (火狐用户可以搜Firesizer)可以调用各种类型的分辨率尺寸查看效果

    展开全文
  • Windows下获取屏幕坐标及分辨率

    千次阅读 2020-06-20 17:41:03
    printf("│%s│ %-11s│ %-20s │ %-4s │\n", "屏幕编号", "分辨率", "坐标", "主屏"); nScreenCount = 0; for (auto& itr : vecScreenList) { printf("├────┼──────┼───────────┼───...
  • //检测当前分辨率int Width = GetSystemMetrics(SM_CXSCREEN);int Height = GetSystemMetrics(SM_CYSCREEN);DEVMODE lpDevMode0;lpDevMode0.dmBitsPerPel=;lpDevMode0.dmPelsWidth=Width;lpDevMode0.dmPelsHeight=...
  • (@media 响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 转自《媒体查询尺寸大全》 PC端 按屏幕宽度大小排序(主流的用红色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸、...
  • 不是的 屏幕大小是眼睛能看到的屏幕 比如现在的 1.8 2.0 2.1 寸分辨率 是指在屏幕上 所具有的像素点 常见的有176*220 128*128 240*320 屏幕尺寸一样大的, 分辨率越高显示的越细腻 相反 分辨率一样 屏幕尺寸越大的...
  • 可以看出,pc端分辨率前四 1920*1080 1366*768 1440*900 1024*768 手机端分辨率前三 360*640 375*667 414*736 如何在chrome中查看网页不同分辨率下的表现 f12打开控制台 选择edit添加自定义分辨率 ...
  • <!... <... <head>...冒泡排序法</title> <style type="text/css"> #div{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%;
  • HTML 代码 <!DOCTYPE html> <html lang="en"> ...高度自适应分辨率</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="main"> &.
  • 最近在编写vue项目的过程中,需要做屏幕自适应,但是使用的组件里面强制需要给一个height高度,否则不生效,查到很多资料,发现了如下的几种方法: 1.动态给定样式 <div class="tab-content" v-bind:style="{ ...
  • 用C++代码更改系统分辨率

    千次阅读 2020-06-19 10:09:18
    由于工作需要,我需要制作一个小工具来更改系统分辨率。 小工具需要支持多显示器,每个显示器要能分别设置分辨率 功能很简单,由于不需要做的好看,只要功能可用即可,使用了MFC(只是为了方便) 乱七八糟的逻辑不...
  • /*** 二维数组根据某个字段按指定排序方式排序* @param $arr array 二维数组* @param $field string 指定字段* @param int $sort_order string SORT_ASC 按照上升顺序排序, SORT_DESC 按照下降顺序排序(具体请参考...
  • WPF窗体的自适应分辨率方法

    千次阅读 2021-01-20 20:30:34
    WPF窗体的自适应分辨率方法 开发工具与关键技术:MVC 作者:zhh 撰写时间:2021.1.8 使用WPF创建一个窗体(Window)时,如果设置了固定的高度(Height)和宽度(Width),一旦用户的电脑分辨率设置过低,就会使得窗体和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,303
精华内容 4,521
热门标签
关键字:

屏幕分辨率排序