媒体查询常见的媒体尺寸设置

通过媒体查询，针对不同的设备的尺寸设置断点来改变布局

屏幕        设备        断点
超小屏幕     手机        <768px
小屏幕       平板        >=768px ~ <992px
中等屏幕      桌面       >=992px ~ <1200px
大屏幕       桌面        >=1200px       常用媒体查询尺寸：1200px1100px    1000px   1024px980px768px     720px640px480px375px320px280px

4、移动设备优先

    移动设备优先：超小屏幕 超小型设备（手机，768px以下）
小屏幕  768px-992px@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */
中等屏幕 992px - 1200px  @media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */大屏幕  大于1200px@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */

案例：

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*在移动端看 移动端显示的颜色  768px屏幕以下*/body {background-color: orange;}
/* 小屏幕  768px-992px  屏幕宽度在768px以上显示的颜色*/@media screen and (min-width: 768px) {body {background-color: yellow;}}
/* 中等屏幕  992px - 1200px*/@media screen and (min-width: 992px) {body {background-color: tomato;}}
/* 大屏幕  大于1200px*/@media screen and (min-width: 1200px) {body {background-color: pink;}}</style>
</head>

<body>

</body>

</html>

5、大屏幕设备优先

   大屏幕设备优先：大屏幕 桌面在1200px以上    大型设备（大台式电脑，1200px 以上）中等屏幕 992px-1200px@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */小屏幕 768px-992px@media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */超小屏幕 768px屏幕以下@media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */或者@media screen and (max-width:768px){ ... }/* 超小型设备（手机，767px 以下） *//* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？把超小屏幕的区间降低1px*/

案例：

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 屏幕大于1200px显示的颜色 */body {background-color: green;}
/* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/@media screen and (max-width:1200px) {body {background-color: tomato;}}

/* 小屏幕 768px-992px*/@media screen and (max-width:992px) {body {background-color: pink;}}/* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？把超小屏幕的区间降低1px*//* 超小屏幕 768px屏幕以下*/@media screen and (max-width:767px) {body {background-color: orange;}}</style>
</head>

<body>

</body>

</html>

###

媒体查询常见的媒体尺寸设置相关推荐

屏幕尺寸及媒体查询常见用法
文章目录一.常用的屏幕大小 1.PC端 2.移动端二.媒体查询 1.媒体类型 2.根据不同的媒体使用不同的样式文件 3.max-width 4.min-width 5.运行效果一.常用的屏幕大小 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
css 媒体查询移动端,媒体查询（pc端，移动端不同布局）
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
css媒体查询标准,CSS 媒体查询 - 实例
列的媒体查询媒体查询的常见用法是创建弹性布局.在本例中,我们创建了一个布局,该布局在四列.两列和全宽列之间变化,具体取决于不同的屏幕尺寸: 大型屏幕: 中等屏幕: 小型屏幕: 实例 /* 创建彼此相 ...
css 媒体查询移动端,媒体查询-移动端
媒体查询 @media not all and (min-width:1024px) and (max-width:1199px){ body{ background:blue; } } @media ...
android 媒体查询,CSS常用媒体查询应用
原标题:CSS常用媒体查询应用媒体类型媒体类型 sans - serif字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读. 媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范 ...
pc端ui图片尺寸_pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
现在计算机常用的分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
html电脑屏幕尺寸,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...

媒体查询常见的媒体尺寸设置

4、移动设备优先

5、大屏幕设备优先

媒体查询常见的媒体尺寸设置相关推荐

最新文章

热门文章