响应式网页开发学习笔记--第一期（响应式介绍）

一、响应式网页简介

响应式网页设计，是一种常用的网页设计布局。其核心思想为：网页内容可以随着用户使用的设备分辨率的不同而改变。从而达到能够适应不同设备效果。
与传统的网页设计模式相比，响应式网页设计能够在同一个文件内实现不同的设备访问的不同显示，极大的方便了开发者，同时也提升了用户的使用体验。

二、Web开发工具

Web开发工具主要分为编辑器和浏览器两种，编辑器负责编辑HTML,CSS和JS等与网页相关的文件，浏览器负责解析和运行这些文件。
目前市面有很多种不同的编辑器可以使用。根据自己的具体情况选择不同的编辑器使用。而常用的浏览器也可以根据内核的不同分为几个大类，部分划分如下图。

三、响应式开发

1、宽度断点

众所周知屏幕显示的最小单位是像素点，所谓屏幕宽度断点就是指的人为设置的一个网页显示的宽度，开发者可以通过设置不同断点显示不同网页排版从而达到响应式设计的目的。

· 常用设备的屏幕宽度

PC段	平板电脑	手机
1920 1440	1280 1024 768	812 736 667 568 480 414 …

· 推荐使用断点

大桌面显示屏	小桌面显示器	横屏平板	平板、横屏小平板	小平板、横屏手机	大屏幕手机	小屏幕手机
W≥1440	1440>W≥1280	1280>W≥1024	1024>W≥768	768>W≥640	640>W≥375	375>W

2、@media媒体查询

使用@media 查询，我们就可以根据当前网页显示的分辨率不同而产生不同的排版，具体的应用格式如下：

@media (max-width: Xpx) {
    /*CSS样式代码*/
}
/*宽度在X~∞之间时（即大于X时），应用当前CSS样式*/

@media (min-width: Xpx) {
    /*CSS样式代码*/
}
/*宽度在0~X之间时（即小于X时），应用当前CSS样式*/

@media (min-width:Xpx)(max-width: Ypx) {
    /*CSS样式代码*/
}
/*宽度在X~Y之间时，应用当前CSS样式*/