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

转载于:https://www.cnblogs.com/pangchunyu/p/11557487.html

css3媒体查询尺寸相关推荐

css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程
大家好,今天给大家分享的是css3 媒体查询方向:横屏竖屏教程,希望大家喜欢. 说道媒体查询,很多人会感觉陌生,但是对于做响应式开发的同学来说,那是再熟悉不过了. 结合CSS媒体查询,可以创建适应不同 ...
iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
html 苹果xr媒体查询,iPhone的CSS3媒体查询_html/css_WEB-ITnose
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
css3 媒体查询
最近一直没网,好不容易有网络了,大概了解了下,媒体查询的东西,css3的部分,下面是从网上查到的信息,一起看看吧. 其实我了解的媒体查询就是 :我们的网页能够让用户在不同尺寸的移动设备上面都有很好 ...
pc端常用电脑屏幕媒体查询尺寸
pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全) PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8. ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
CSS3 媒体查询（media）与 Viewport
@media 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. 一.语法 1.样式表中的CSS媒体查询 @media mediatype and|not|only (media fe ...
怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
CSS3媒体查询适配不同型号的手机 IphoneX/IphoneXR等
一.定义使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 当 ...

css3媒体查询尺寸

css3媒体查询尺寸相关推荐

最新文章

热门文章