如何不用 Framework 开发响应式设计？
响应式设计已经成为了当今Web开发中不可避免的话题。随着越来越多的用户使用移动设备访问网站，为了保证用户体验，我们需要保证我们的网站能够适应各种屏幕尺寸，从而提高访问率以及用户满意度。
在这个过程中，许多开发者选择使用框架，比如Bootstrap。框架可以使开发更快速和容易，但是它们也往往会增加不必要的代码。同时，使用框架可能会使你陷在某种程度的依赖中，并且减少了开发的自由度。
下面，我将通过介绍响应式设计的基础知识和如何使用CSS媒体查询来实现响应式设计，来帮助你不使用框架来实现响应式设计。
响应式设计基础知识
响应式设计的核心思想是根据浏览器宽度进行界面调整，而不是使用固定的像素值。这种方法可以确保用户在任何设备上都能够获得良好的体验。在实现响应式设计时，我们应该遵循以下几点：
- 使用百分比
使用百分比将尺寸与相对于它们的容器的大小相匹配，因此它们可以自适应调整。以下是一个使用百分比的例子：
img {
max-width: 100%;
height: auto;
}上述样式使用了img选择器，并设置max-width为100%，这样就可以根据容器的宽度自动调整图像大小，并且高度会自动适应。
- 使用CSS媒体查询
CSS媒体查询可以检测设备的屏幕宽度，并根据需要应用样式。以下是一个使用CSS媒体查询来设置不同屏幕宽度的例子：
-- -------------------- ---- -------
---------- -
------ -----
-
------ ---- ------ --- ----------- ------ -
---------- -
------ ------
-
-
------ ---- ------ --- ----------- ------ -
---------- -
------ ------
-
-
------ ---- ------ --- ----------- ------- -
---------- -
------ -------
-
-上述代码使用媒体查询来设置不同屏幕宽度下容器的宽度。在这个例子中，当屏幕的宽度大于等于768px时，使用750px的宽度；当屏幕宽度大于等于992px时，使用970px的宽度；当屏幕宽度大于等于 1200px时，使用1170px的宽度。
示例代码
下面是一个简单的HTML文件和CSS文件，这个文件使用上述思路来实现响应式设计。这个文件只包含了基本的结构和样式，并没有引入任何框架，在不同屏幕尺寸下，容器的大小会自动适应。
HTML文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
----- ---------------- -----------------
-------
------
---- ------------------
--------------
--------------------------------------------------------------
------
-------
-------CSS文件：
-- -------------------- ---- -------
---------- -
------ -----
---------- ------
------- - -----
-------- -----
----------- -----------
----------------- -----
-
------ ---- ------ --- ----------- ------ -
---------- -
---------- ------
-
-
------ ---- ------ --- ----------- ------ -
---------- -
---------- ------
-
-
------ ---- ------ --- ----------- ------- -
---------- -
---------- -------
-
-结论
框架可以使开发更快速和容易，但是这种方法也往往会增加不必要的代码和降低开发的自由度。使用CSS媒体查询和百分比布局，可以实现响应式设计的基本要求，保证了用户在不同设备上的良好体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a02499babaf620fa0658a