如何做响应式布局网站（如何做响应式布局网站设计）

html5如何制作响应式网页？

HTML5

在制作响应式网页时，首先要考虑是全平台适配还是只是移动适配。这里以移动响应式网站为例，告诉大家如何制作响应式网页。

1.选择基本设计尺寸，一般以1080为基准。确定响应式网页设计的应用场景后，与美工(或设计师)沟通。之前，美工通常需要制作几套主流移动设备屏幕分辨率的设计图。现在，使用streaming layout和rem，可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2.美工完成设计图，前端工程师的工作就开始了。这时候可以用PS或者FW来切图。一般来说，烟花

Cs6剪图比较快，但是有时候在烟火里画面会失真。所以有时候需要用PS来协调。PS有切片工具，可以专门用来切图片。

特定代码:

(功能

(doc，

赢)

{

定义变量

多西尔

=

doc.documentElement

resizeEvt

=

'方向改变& # 39；

在

窗户

一端有带圈可握的短马鞭

'方向改变& # 39；

:

'调整大小& # 39；,

重新计算

=

功能

()

{

定义变量

客户端宽度

=

docEl.clientWidth

如果

(!客户端宽度)

返回；

docEl.style.fontSize

=

20

*

(客户端宽度

/

320)

'px & # 39;

};

什么是响应式网页布局？

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

什么是响应式布局？

响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站。可能有些人对“什么是响应式布局”还不是很了解，下面达内长沙web培训就跟大家简单说下什么是响应式布局：响应式布局：简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。那么响应式布局的优点和缺点又有哪些呢？优点：1.面对不同分辨率设备灵活性强2.能够快捷解决多设备显示适应问题缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么？原理：简单点说响应式布局它是通过CSS中MediaQuery（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。