css3媒体查询尺寸

短命女 2022-12-03 09:14 230阅读 0赞

转自：https://www.cnblogs.com/pangchunyu/p/11557487.html  
css3媒体查询尺寸  
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那么就是大的在上面，小的在下面

800 1024 1280 1366 1440 1680 1920

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 @Media 媒体查询

CSS3 媒体类型 <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr>

素颜马尾好姑娘i/ 2023年01月23日 14:51/ 0 赞/ 238 阅读

相关 css3媒体查询尺寸

转自：https://www.cnblogs.com/pangchunyu/p/11557487.html css3媒体查询尺寸 PC端按屏幕宽度大小排序（主流的用

短命女/ 2022年12月03日 09:14/ 0 赞/ 231 阅读

相关 CSS3 之媒体查询Media Query

　　Media Queries是CSS3有关媒体查询的属性，有了CSS3 之媒体查询Media Queries就可以进行媒体查询，针对每个不同的媒体进行不同的样式编写。传说中的

旧城等待，/ 2022年09月17日 05:30/ 0 赞/ 264 阅读

相关 CSS媒体查询

不同设备：用法： @media screen{ } 可选值：all 所有设备；screen 屏幕；print 打印机；speech 屏

小鱼儿/ 2022年09月04日 14:43/ 0 赞/ 290 阅读

相关 CSS3媒体查询

经验不足的前端人员在头几次面对一大堆兼容性问题时往往手足无措，有时候一个样式的兼容性问题我们不需要去这种写一个能匹配所有设备的CSS样式，而是可以完全针对不同特性的设备编写不同

深碍√TFBOYSˉ_/ 2022年07月14日 12:50/ 0 赞/ 258 阅读

相关 CSS3-@media媒体查询使用总结

转自：[http://www.qdfuns.com/notes/26218/296b9dc57c46b25b429a219392cbcde2.html][http_www

刺骨的言语ヽ痛彻心扉/ 2022年06月17日 13:38/ 0 赞/ 344 阅读

相关 CSS3的媒体查询@media

CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页，页面会根据浏览器长宽来渲染页面。语法： @media mediaT

╰+攻爆jí腚メ/ 2022年05月18日 09:19/ 0 赞/ 287 阅读

相关 CSS3媒体查询+手机自适应

媒体查询媒体查询是可以让网页适用于不同大小屏幕的，写媒体查询时要注意：主样式在前，媒体查询样式在后。媒体查询的条件写法，可以从小到大，也可以从大到小，也可以

谁借莪１个温暖的怀抱￠/ 2022年04月04日 07:00/ 0 赞/ 511 阅读

相关 Html5 @media + css3 媒体查询

[css3 media媒体查询器用法总结][css3 media] 随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用

客官°小女子只卖身不卖艺/ 2021年11月02日 15:42/ 0 赞/ 395 阅读

相关 CSS媒体查询

\\\css3媒体查询 css3媒体查询是响应式方案核心 \\\媒体类型 all 所有媒体（默认值） screen 彩色屏幕 print 打印预览

蔚落/ 2021年10月24日 00:32/ 0 赞/ 343 阅读