css3根据设备大小设置相应的页面

一,不同设备页面显示

1.1简介

现在的网页不仅仅只是呈现在电脑屏幕1080*1920的尺寸了,而现在出现多种移动端，在移动端中你也可以缩放页面，滚动页面，所以我们开发人员要将合适的网站应用在不同设备下就是一个苦不堪言的工作。

那么媒体查询出现了，一个css3的新功能

1.2媒体查询

就是查看页面的大小，分辨率，颜色等等并根据不同的样式，设定不同的样式表

如下如果浏览器窗口大于等于480px,采用以下样式

  p{
            color: red;
        }
        @media (max-width:480px) {
            p{color: green;}
        }

2.gif

在 手机上使用max-device-width属性

1.3高级媒体查询

有时候我们需要多个条件来看页面的展示情况,如窗口宽度在400-500px之间显示以下样式

@media (min-width:400px) and(min-width:500px) {
            p{color: green;}
        }

那么如果应用多个就会有冲突了 如果有一个400-600和600-700
那么600宽度的这个窗口很有可能有冲突,所以使用小数点来进行解决,599.9这样