1. bootstrap怎么写响应式布局
响应式设计的初衷是对于不同屏幕属性的设备进行近乎一致的呈现,当然,是使用『一份』代码,但是,问题来了,不同设备的网络环境不同(强弱网),对样式表支持度不同(客户端属性),所以如果采用响应式的思路来玩,这里我们适配主要的受众设备即可,以下举例以常见设备为主:PC高分屏,PC常规屏,各种平板,各种手机以及其打开页面的client,特别的设备,诸如阅读器。
首先根据自己的主要受众的设备屏幕属性完成你的原型设计,包括以上的设备中脚本渲染的模块。
使用真机,模拟器或者chrome开发模拟器中的device切换的功能(审查元素-最上面一条,左边三个图标中的手机按钮),以下重点讲第三种(前两种没啥可讲的吧。)
2. 什么是响应式布局
响应式布局:简单点说,就是做一个网站同时能兼容多个终端,由一个网站转变成多个网站,为我们大大节省了资源。
那么响应式布局的优点和缺点又有哪些呢?优点:1、面对不同分辨率设备灵活性强2、能够快捷解决多设备显示适应问题 缺点:不能完全兼容所有浏览器,代码累赘,加载时间加长。说了这么多,可能还有很多人,不明白响应式布局该怎么去做,以及它的开发原理是什么?原理:简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。
比如我们公司最近做的逸合投资房地产的项目中,就用到了响应式布局。下面就以我做的简单的响应式布局框架为案列给大家讲解一下:代码如下:<!DOCTYPE html>
<meta charset="gb2312">