什么是网站响应式布局pc电脑手机平板自适应?

随着网页设计技术的飞速发展，以及html5+css3的迅速崛起。响应式布局已成为专业的web前端人员必须掌握的技能！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如PC，手机，平板做一个网站转眼间就可以变成3个网站，和现在相比是不是更加具有优势呢!
可能有些人对“什么是响应式布局”还不是很了解，下面就跟大家简单说下什么是响应式布局：
响应式布局优点：
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。
说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么？
原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。
下面我就以我最近做的一个简单的响应式布局框架为案列给大家分享：


通过上面代码可知：它是通过@media媒介查询判断来执行的CSS样式，也就是说：如果我要做一个响应式布局网站，同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式，通过@media媒介查询来完成响应式布局。
值得注意的是：在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。
加在头部标签里禁止代码如下: