Bootstrap响应式与自适应区别

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<script type="text/javascript" src="js/jquery1.12.4.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>

<style type="text/css">.row div{border: 1px solid red;margin-top: 5px;}.row{border:1px solid #000000;}</style>

<div class="container"><div class="row col-md-12 visible-lg-block">3</div><div class="row"><div class="col-xs-12 col-sm-6 col-md-8">1</div><div class="col-xs-12 col-md-6 col-md-4">2</div></div></div>

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

静态布局（Static Layout）：即传统Web设计搜索，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。

自适应布局（Adaptive Layout）：自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。你可以把自适应布局看作是静态布局的一个系列。

流式布局（Liquid Layout）：流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；设置百分比宽，没有一定（没有固定数值，不会写死数值）的宽；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

响应式布局：一份代码适应多个设备，响应式包括自适应，响应式布局是基于css3之上，所以 ie9 以下不支持响应式

转载于:https://www.cnblogs.com/Aledebaran/p/7693390.html

Bootstrap响应式与自适应区别相关推荐

响应式和自适应的区别
先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几 ...
自适应网站与响应式网站的区别在哪？
youlie自适应网站与响应式网站的区别在哪?两者之间有什么区别吗?对于自适应网站与响应式网站的区别,我想很多人都会有所误解,以为两者是是一样的.其实不是,从网站建设的角度来讲自适应网站建设也是响应式 ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
服务器端网站自适应,自适应网站与响应式网站的区别，SEO优化该怎么选择移动端...
4G网络越来越普及,移动端流量占比越来越大的今天,作为SEOer我们的关注点也逐渐向移动端转移,目前用的比较多的手机站架构方式就是响应式和自适应两种. 该选择那种建站方式架构手机站呢?有句话说的好:& ...
响应式与自适应设计:设计师的最佳选择是什么?
作为全球先进的科技巨头,Google一直推崇响应式网页设计,并在今年的4月21日发布了重大的更新,目的是提高响应式在移动终端上的运行效率.尽管在更新中没有明确表明你必须使用响应式设计.只是简单的提示响 ...
html自适应布局视频,2018年最新的8个响应式与自适应视频教程推荐
在学习前端的过程中经常可以看到自适应布局和响应式布局,那么,什么是响应式布局?自适应布局又是什么呢?响应式布局设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本:自适应布局设计是能使网 ...
Bootstrap响应式Web开发(一)
Bootstrap响应式Web开发(一) 目录 Bootstrap响应式Web开发(一) 一.Bootstrap的概念.特点及组成二.浏览器三.Visual Studio Code 四.移动端开发 ...
Restive.js – 轻松让网站变成响应式和自适应
Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...
Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...

Bootstrap响应式与自适应区别

Bootstrap响应式与自适应区别相关推荐

最新文章

热门文章