响应式简述

@media

Media Queries(媒体查询)，他的作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。

其实就是，允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。

 

screen（屏幕）是媒体类型里的一种，css2.1定义了10种媒体类型。

and被称为关键字，其他关键字还包括not(排除某种设备)，only(限定某种设备)。

(min-width:400px) 就是媒体特性，被防止在一堆圆括号内。

 

写法：

 

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:600px) and (max-width:800px)">

 

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width:400px)">

 

@media screen and (max-width:600px){

     .classname{

         background:#ccc; 

     }

}

 

 

/*设备物理像素与设备独立像素比例，（一般用于判断横屏显示还是竖屏显示）*/

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" href="iphone4.css"/>

/**横屏显示**/

/*(orientation:portrait) 横向 (landscape)*/

 

写的时候必须要有空格，否则不生效

@media all and (orientation : landscape) {

     h2{color:red;}/*横屏时字体红色*/

}

/**竖屏显示**/

@media all and (orientation : portrait){

     h2{color:green;}/*竖屏时字体绿色*/

}

 

ie9以下的浏览器不支持css3的@media属性，我们的解决方法是加载一个兼容的js库

 

<!--[if lt IE 9]>

     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

 

 

响应式布局时的注意事项：

1.字体使用rem

html{

     font-size:62.5%;

}

font-size:2rem==font-size:20px;

 

2.设置最小宽度和最大宽度

min-width   和 max-width

 

3.宽度设置成百分比，不固定宽度

4.使用边框盒模型

box-sizing:border-box;

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/baixuemin/p/6492550.html