响应式网站建设需要什么样的技术？

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。通俗一点来讲就是一套代码让他在不同的分辨率下通过局部调节，去适应不同的设备，不管你是电脑、pad、还是手机，只要点开这个页面都可以很方便的浏览上面的信息。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

所以怎么样实现响应式布局如何让浏览器能自动的做出这些改变就很重要。配合媒体查询来实现这一过程，即media queries，针对不同的媒体类型定义不同的样式，从而实现响应式布局，还可以自定义不同分辨率下设置不同的样式。

常见的几种设备分辨率 :

1024分辨率以上：PC端

1024 ~ 768 : pad pro

768 ~ 450 : pad mini , mobile 横屏

450分辨率以下： mobile 竖屏

媒体查询的语法:

@media all and (min-width:500px){

}

针对特定范围:

@media all and (min-width:500px) and (max-width:800px){

}

针对横屏操作，只针对移动端，PC端的屏幕正常情况下都是竖屏的

@media all and (orientation:portrait){

}

(注意里面的空格是要添加的)

加在link从css文件内引用

   

    **

    **

一般情况下按照一定的顺序去来布局是比较好一点的。例如:1.先去适配PC端->过度到pad->过渡到手机端是比较方便的。

   

网站开发技术、网站前端后台开发