如何利用css3中@media实现响应式布局

html-css0159

如何利用css3中@media实现响应式布局,第1张

响应式布局,说穿了就是用css写了好几套的样式,当屏幕大小不同的时候,读取不同的样式而已。例如:

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

body {

background-color:red

}

}

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

body {

background-color:lightblue

}

}

这两个的意思,就是当屏幕最大宽度是300的时候,body的背景是红色;当屏幕最小宽度是700的时候,body的背景是淡蓝色。在@media这个大括号中,你只要按照平常的css一样写就行了

响应式布局,说直白点就是一个网站能够兼容多个终端,可以按不同的分辨率显示不同的状态。而实现这个就要用到css3的Media Queries(媒介查询)。这个功能非常的强大,但是有优点的同时,缺点也是会存在的。那就是兼容各种设备工作量大,效率低下,加载时间长等。但是学起来很容易,看完下面的代码你就会了。

.page{

    width:960px

    height:1000px

    margin:0 auto

    background:#CCC

}

/* 设备最大宽度960px */

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

    .page{

        width:100%

        background:#69F

    }

}

/* 宽度大于480px且小于768px */

@media screen and (min-width: 480px) and (max-width:768px) {

    .page{

        width:100%

        background:#F00

    }

}

/* 设备最大宽度480px */

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

    .page{

        width:100%

        background:#00FF00

    }

}

这样就可以在不同的分辨率下采取不同的样式了。

另外还有一点,如果是移动端开发,一定要在头部加上以下代码。

<meta name="viewport" content="width=device-width initial-scale=1.0">