响应式网页设计思路及注意事项

一、什么是响应式网页

响应式网页设计就是让网页具有根据设备类型应用CSS样式的能力。

1、设计：设想、计划。设计就是把想法实现。

2、网页设计：按照一定的设计思路布局网页内容。

3、传统网页设计：都是针对PC端浏览器而设计的，不具备查询设备的能力，更不能对多种访问设备做出响应。

4、传统网页设计的弊端：在移动互联网时代，传统的网页设计不适合多屏幕时代。响应式网页设计应运而生。

5、响应式网页设计是一种设计网页的思想/方法。

6、响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的CSS样式。

二、如何实现响应式

第一种：通过CSS判断用户设备

• 设置视口

• 设置媒体查询：使用Media Query判断用户访问设备

第二种：通过JS判断用户设备

• 视口

• 使用js判断用户访问设备

示例：通过css判断不同设备，然后进行独立样式控制，一般情况下，设备屏幕大小可按以下像素进行分类：

@media (min-width: 576px) { } 

@media (min-width: 768px) { }

@media (min-width: 992px) { }

@media (min-width: 1200px) { }

@media (min-width: 1400px) { }