如何学习响应式网页设计 如何提高学习效率

我在几天内学会了响应能力，在此之前，我只能制作基本的网页，对浏览器兼容性知之甚少。

在制作响应式网页时，只需要明确一点，那就是不要把网页的布局弄乱，对框的位置控制比较严格。

响应式网页的一般布局是从盒子的上到下，一次慢慢堆放一个盒子，然后从左到右放置在盒子内部，严格控制高度和宽度，避免超标和错位。 这样一来，就可以避免在处理响应能力时出现各种问题，增加**的数量，简化并直接从一开始的布局决定后续进度，也是最关键的地方。

其次是使用了 CSS3 的各种属性，其实响应能力不一定非得是 H5，主要作用是 CSS3 的新支持，以我的经验来说，本质上还是兼容 IE8 和 HTML4 比较好。 在 CSS3 中，对屏幕分辨率的判断（具体来说可以），基本上决定了一切的响应性，其实 Bootstrap 的网格布局是一个很好的参考，不同分辨率下 div 宽度的减小，以及随着内容增长自动跟随的框高，都是很好的参考。

同时，响应能力也需要一些JS基础，对于屏幕分辨率监控，我现在依靠JS来解决兼容性问题。

以上是个人经历的简单描述，其实关键是HTML的基础决定了一切，只要你多做实际项目，你的想法就会变得非常清晰。

我是怎么知道的？ 答案是公司逼迫的，如果学不着回应，可能就过不了考核期，所以短短四天就能学会做项目，最明显的感觉是，只要项目多做，就算是研究其他网页， 你可以感觉到法律。

1. 学习 CSS3 的基础知识。

media (min-width:760px)}media (min-width:1000px)}media (min-width:

1200px）} 它们位于平板电脑、台式机和宽屏下方。容器下方的宽度。

3、学习网格族系统，详细可参考。

4. 希望对你有帮助。

首先，在编写页面时，要准备一个响应式网页，使用100%的宽度，不要设置固定的高度。

设置 meta 以适应移动页面。

了解PC端主流的显示分辨率，设置显示断点，比如1920*1080通过**查询设置1920宽度的显示模式，1600*1200，设置1600宽度的显示模式，其实一般都是1200以上设置相同的显示模式，主要是显示分辨率低， 如 800 * 600 设置其显示模式，xs：576px sn：576px md：768px lg：992px xl：1200px xxl：1600px

一般来说，**查询需要设置的PC端范围就是这些。

在移动端，一般不是通过**查询设置的，先用js将单位设置为rem，即1rem=100px

在本例中，默认字体为 ; 将框的宽度设置为 100% 的宽度，并让它适应屏幕。

如果使用框架，还可以将其与栅格系统组合以实现响应兼容性。

其实移动端的兼容性是最麻烦的，因为手机品牌的种类很多，系统一般分为Android和iOS，但也有系统版本、问题，不同的系统版本会有不同的显示方式（尤其是iOS系统）。

Android主要在品牌类型上有所不同，屏幕分辨率不同。

如果要做基本兼容性，需要先设置元，然后将宽度设置为100%。

不要设置宽度和高度，默认宽度自动为100%，高度被子元素改为拉伸，然后通过js函数写入px的计算值将其转换为rem单位，肯定很难肯定运行版本的响应式设计必须从头开始设计，否则， 那些以后几乎要改变它的人都想重构。

1.您可以在移动端进行调试，通过CSS查询适配移动端。

如何快速轻松地实现响应能力。