我理解的响应式设计

首先所谓的响应式布局编码设计，我理解的就是编写的网页文件，在不同的设备上浏览打开时或者在同一设备上不同大小的浏览器窗口下，可以获得最佳布排体验效果的网页设计。不会出现因为浏览设备的屏幕的大小和分辨率的大小或者浏览器的窗口大小的变化而出现网页页面的过小显示或者过大显示，或者内容的错位。

单纯编写的网页文件在不同的设备上查看时由于设备自身的分辨率与网页逻辑分辨率可能存在差异，设备分辨率大了就有可能导致网页在设备上看起来缩小，或者是过于偏大，只看到局部。

所以，响应式设计的第一件事要做的就是给网页文件对各大设备做适配，简单的说就是可以通过缩放网页以达到与设备窗口的适应。

实现工具：<meta>标签 属性

实现语句：<meta name="viewport" content="width=device-width, initial-scale=1">

意义：网页大小=设备视窗大小

好了，到这里我们已经可以实现把编写的网页在不同的移动设备和浏览器窗口大小上充分展示。

但是很快我们也会遇到一个问题，如果我们的网页版面比较大，那就会出现很多内容、如文字等看起来相当之小，看不清

我们必须通过放缩去查看，但是这种放缩带来的交互体验不是很好，这时我们可能会想，如果有一种办法可以实现编写的网页识别读取设备的的屏幕数据，自动为我们提供一种适合该设备的版式布局的网页预览方式，那该多好。

告诉你，已经可以实现了。

实现原理：通过读取浏览设备的屏幕数据，调用预先编写好的布局样式表：

基本语法：@media screen and (condition1) and (condition2) {styleList}

语法解释：@media screen 意思是获取设备的屏幕参数，如宽。condition1、2是调用样式表的条件，通常是：max-width和min-width最大宽和最小宽的意思。styleLIst就是样式表。

下面以一个具体的例子做解释吧！

@media only screen and (min-width: 1000px) {
.container{
width: 100%;
background: yellow;
}
}

解释：读取浏览设备的屏幕宽度，如果屏幕的宽度大于或等于设置的最小宽度1000px，则调用样式表

.container{
width: 100%;
background: yellow;
}

。