建站知识

建站知识提供网站常见问题解答和网站问题分析,解决站长们在建站过程中遇到的各类网站问题。

CSS3 @media媒体查询

媒体查询定义:

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

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

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


BootStrap中使用的媒体查询

分为3个屏幕尺寸

小于768px是移动端屏幕

大于768px小于992px是平板端屏幕

大于992px是PC端屏幕


/* 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: 992px) {

    .example {background: orange;}

} 



/* Extra large devices (large laptops and desktops, 1200px and up) */

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

    .example {background: pink;}

}


常见的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寸)


IE8兼容性处理

对于ie低版本情况下不支持css3,可以通过引用第三方库进行处理

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --><!-- if lte IE 8>

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<!endif-->

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

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


站长提示

如果你的问题还没有解决,可以点击页面右侧的“ ”联系我,和小伙伴们一起交流讨论。如果你想请站长喝咖啡,扫码下方打赏~

要找好模板,上PB模板网! 广告

标签:

标题:CSS3 @media媒体查询

链接:http://www.onep4.com/knowledge_9/24.html

版权:本文为 原创版权,转载请以链接形式注明作者及原始出处