响应式布局css_html5/css3 响应式布局介绍 及 设计流程

HTML5/CSS3 响应式布局简介

使用CSS3的媒体查询功能。

了解媒体查询属性

@media 和 (最小宽度：320px) 和 (最大宽度：479px)

我们先从这个条件语句开始说起，media 属性后面跟着一个媒体类型（上面说的十种媒体类型中的一种），然后使用 and 关键字连接条件（其他关键字还有 not 和 only，从字面意思上就很容易理解了，就不详细解释了），然后括号里就是一个媒体查询语句，稍微懂一点 CSS 的人都能看懂。

@media screen and (max-width : 320px){
    body{...}
}
@media screen and (min-width: 800px) and (max-width: 1024px){
    body{...}
}

至于选择多少种分辨率，完全取决于你产品的需求，常见的分辨率有手机、平板（注意这些终端有横屏和竖屏）、桌面显示器等，针对你面对的终端自定义样式即可。

当面对如此精细分辨率的终端时，我们还有另一个条件查询语句——pixel-ratio。

例如，在示例中

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判断终端像素比为2时需要渲染的样式，上面的像素比为2，高分辨率设备像素比为1.5，例子中只有像素比为2的查询，1.5或者其他比例的方法都一样，前面的用到了几个浏览器的私有属性，最后一个是通用属性。

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

平等的

@media only screen and (min-device-pixel-ratio: 2)

为了某些版本的兼容性，它必须很长。

body{
    font-size:24px;
}
.box2{
    background: url(d/20.png) #ccc;
    background-size:50%;
}

在像素比为2的终端上写这个的目的是为了更容易识别。

比如上面的demo，如果使用上面的苹果手机查看的话，中间的背景图应该显示“2.0像素比”。

我觉得media query兼容性不是很重要，因为很少有终端自带IE9以下的浏览器，大部分都是高级浏览器，如果有特殊需求，可以下载兼容的js文件

将其作为条件注释添加到文件中。

HTML5/CSS3响应式页面设计流程

步骤 1：确定需要兼容的设备类型和屏幕尺寸

通过用户调研，我们可以了解用户使用的设备分布，确定需要兼容的设备类型和屏幕尺寸。

需要考虑的问题：

响应式设计时页面适用的尺寸范围是多少？

考虑用户需求和实施成本来选择合适的尺寸。

第 2 步：制作线框原型

针对确定的尺寸，制作不同的线框原型，需要考虑页面布局如何变化，内容尺寸如何缩放，功能和内容的删除，甚至特殊环境的专门设计，这个过程需要设计师和前端开发人员的密切沟通。

步骤3：测试线框原型

将图像导入到合适的设备并进行一些简单的测试可以帮助我们尽早发现可访问性、可读性等方面的问题。

步骤4：视觉设计

请注意，移动设备的屏幕像素密度与传统电脑屏幕不同，设计时需要保证内容的可读性以及控件可点击区域的面积。

步骤5：前端实现

相较于传统Web开发，响应式设计页面最终输出的结果更容易因为页面布局、内容大小的变化而与设计稿产生明显差异，这就需要前端开发人员和设计师之间进行更多的沟通。