响应式web设计

目前已经越来越多的网站以及wap站点使用响应式设计，因为大屏幕的移动设备越来越普及，而自适应布局已经无法胜任各种游览器的需求。响应式设计的目的就是尽可能以最好的布局显示您的数据，以实现用户友好的Web页面。

@media screen and (max-width:550px) and（min-width：320px）{

    body{background:red;}

}

首先写一个最简单的代码,相信有点css基础的同学都能看懂。media属性后面跟着的是一个screen的媒体类型，然后用and关键字来链接条件，然后括号里的就是一个媒体查询语句（屏幕尺寸在320-550px时候执行body为背景为红色这个条件）。这个语句就是响应式布局的基础应用了，在判断终端分辨率大小之后，赋予不同的样式进去。当然除了可以查询屏幕的最大宽度以外，还可以查询显示屏是纵向放置的还是横向放置的。

比如：

    <link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css" />

该行代码的意思就是首先，媒体查询表达式询问了媒体类型（你是一块显示屏嘛？），然后询问了媒体特性（显示屏是纵向放置的嘛？）。

任何纵向放置的显示屏设备都会加载portrait-screen.css样式表，其他设备则会忽略该文件。

当然也可以在媒体查询开头加not,会使非纵向放置的显示屏设备加载样式文件。

     <link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait-screen.css" />

组合写法,条件都成立的情况下加载该css：

    <link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px)" href="portrait-screen.css" />

 

响应式布局在高级游览器下可以正常使用，但是在ie.9以下不兼容，还要自己下一个兼容性插件。

转载于:https://www.cnblogs.com/xxiaomai/p/3430339.html