什么是响应式布局?

2018-08-25 建站知识

  无忧商业模板融合了H5技术,采用响应式布局,自适应用户浏览终端,使用手机、平板电脑、普通电脑浏览网站均能友好的展示,一套模板即可兼容PC\平板\手机\微信等多种浏览终端。

  可能有些人对“什么是响应式布局”还不是很了解,下面就跟大家简单说下什么是响应式布局:

  响应式布局:简单点说,就是做一个网站同时能兼容多个终端,由一个网站转变成多个网站,为我们大大节省了资源。

  那么响应式布局的优点和缺点又有哪些呢?

  优点:1.面对不同分辨率设备灵活性强

  2.能够快捷解决多设备显示适应问题

  缺点:不能完全兼容所有浏览器,代码累赘,加载时间加长。

  说了这么多,可能还有很多人,不明白响应式布局该怎么去做,以及它的开发原理是什么?

  原理:简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

  它是通过@media媒介查询判断来执行的CSS样式,也就是说:如果我要做一个响应式布局网站,同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式,通过@media媒介查询来完成响应式布局。

  值得注意的是:在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。

  禁止代码如下:

<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>

  加在头部标签里

  响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。