Css3 多媒体查询

Css3 多媒体查询

1.针对不同的媒体使用不同的样式，即响应式页面。

2.     -768px      phone

768px-992px ipad

992px-1200px  pc

1200px-       pc宽屏

3.设置方法：

   1）多个独立的css文件中分别写不同媒体的页面样式，在html中分别调用

         <link ref=””  href=”” media=”all and (min-width: )and…”/>

        

   2）一个Css文件写所有响应样式,html调用

        @media all and (min-width: ) { … }

       注：and前后用空格间隔

      

增：①data-name=””

         /*自定义属性，也叫扩展属性，服务器识别不会报错*/

        调用data-name后的内容时： content：”(”alter(data-name)”)”

       ②letter-spacing：npx  /*文字间距*/