pc端响应式-媒体查询

Posted 石志凯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了pc端响应式-媒体查询相关的知识,希望对你有一定的参考价值。

媒体查询(@media):能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果

列举常用的pc屏幕宽度:

1024  1280  1366  1440  1680  1920 

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

1、css样式

假设我们在不同屏幕下要写基础字体的变化;

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

@media screen and(min-width: 1100px) {
body{font-size: 14px}
} /*>=1100的设备屏幕*/
@media (min-width: 1280px) {
body{font-size: 18px;}
} /*>=1280的设备屏幕*/

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

@media screen and(min-width: 1440px) {
body{font-size: 24px !important;}
} /*>=1440的设备屏幕*/ 

@media screen and(min-width: 1680px) {
body{font-size: 26px;}
}  /*>=1680的设备屏幕*/ 
@media screen and(min-width: 1920px) {
body{font-size: 30px;}
}  /*>=1920的设备屏幕*/ 

*获许有人要问 screen  这个起什么作用?

他用于电脑屏幕,平板电脑,智能手机等。还有别的属性值,我就不多说。看菜鸟教程:http://www.runoob.com/cssref/css3-pr-mediaquery.html

2、样式引入

<link rel="stylesheet" media="(min-width:1024px) and (max-width:1366px)" href="mediaStyle.css" />

3、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等其他浏览器支持媒体查询

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

最后为了减少ie低版本的出现,加上一句 <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />我感觉会更好

  

以上是关于pc端响应式-媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

pc端响应式-媒体查询

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

浅析响应式布局,rem布局,媒体查询布局

CSS3响应式布局(媒体查询@media)