响应式设计（Responsive design）
就是一个网站能够兼容多个终端一而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。
自适应设计（Adaptive Design）
自适应设计是能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
不同点：
比较直观的不同是：
自适应：需要开发多套界面；响应式开发一套界面
自适应设计 通过检测视口分辨率，来判断当前访问的设备是：PC端、平板、手机，从而请求服务层，返回不同的页面；
响应式设计 通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展示不同的布局和内容；
自适应 对页面做的屏幕设配有一定范围：比如pc端（>1024） 一套适配，平板（768-1024）一套适配，手机端（<768）一套适配；
响应式一套页面全部适配 （可以想象：响应式设计要考虑的内容要比自适应设计复杂的多）
共同点：
两者都是优化适应互联网中越来越分化的视口浏览体验，而出现的为视口提供更好的体验的技术。用技术来使页面适应不同分辨率的视口的设计。
响应式优缺点和标志
标志
*面包屑菜单
*改变浏览器宽度会在不同分辨率下显示不同的布局
优点
*面对不同分辨率设备灵活性强
*能够快捷解决多设备显示适应问题
缺点
** 仅适用布局、信息、框架并不复杂的部门类型网站
** 兼容各种设备工作量大，效率低下
** 代码累赘，会出现隐藏无用的元素，加载时间加长
** 其实这是一种折中性质的设计解决方案，多方面因素而达不到最佳效果
** 一定程度上改变了王章原有的布局结构，会出现用户混淆的情况
自适应网站的优缺点和标志
标志
** 大多只是适配单个终端的主流N个主流视口（2-3个）
** 当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向华东指示器（主要出现在PC端，移动端决不允许出现这种情况）
** 总体框架不变，横向布局的板块会有所减少
优点
** 对网站的复杂程度兼容性更大
** 实施起来代价更低
** 代码更高效
** 测试更容易，运营相对更精准（图片可控性更高）
缺点
** 在移动端设计大行其道之下，同一个网站，往往需要更为不同的设备开发不同的页面，增加开发成本
** 当需求改变时，可能会改动多套代码。流程繁琐
3.web前端-移动端响应式与自适应
1.在HTML的头部加入meta标签
在HTML的头部，也就是head标签中增加meta标签，告诉浏览器页面宽度等于设备宽度，且不进行缩放，代码如下
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0">
width=device-width表示页面的宽度等于设备屏幕的宽度，
initial-scale=1.0 表示设置页面初始缩放比例为1
user-scalable=no 表示禁止用户进行缩放
maximum-scale=1.0,minimum-scale=1.0 表示设置最大的和最小的页面缩放比例
因为各大浏览器对meta标签的解析程度不一样，所以我们要尽可能的去兼容所有浏览器
复制代码
4.响应式页面的实现
目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是boostrap下的栅格布局，
媒体查询，即@media查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。因为是设置样式，所以将媒体查询相关的代码放在css文件的最下方即可。
实例1：
如果页面宽度小于 300 像素,则修改body的背景颜色为红色:
@media screen and (max-width: 300px) {
body {
background-color:red;
}
}
如果页面宽度大于 300 像素并且小于600像素，则修改body的背景颜色为绿色:
@media screen and (min-width: 300px) and (max-width:600px) {
body {
background-color:green;
}
}如果页面宽度大于 600 像素，则修改body的背景颜色为蓝色:
@media screen and (min-width: 600px) {
body {
background-color:blue;
}
}
代码解释：
screen表示电脑屏幕，平板电脑，智能手机等，min-width和max-width用于定义设备中页面的最小和最大宽度。
5.字体自适应
我们想实现手机端自适应，就是可以让页面的元素字体、间距、宽高等属性的属性值可以随着手机屏幕尺寸的变化而变化，接下来我们看如何利用js来动态的设置rem并实现移动端的自适应，Js代码如下：
//获取html元素
var html = document.getElementsByTagName('html')[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + "px";
以上代码实现了利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用。比如说，对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。这样的话即使我们对一个元素设置同样的大小和单位，也会在不同的设备下显示不同的大小。比如说div{width:100rem},在iPhone6下它的宽度将等于100px，而在iPhone5下它的宽度等于100 * 0.85333 = 85.333px。这样我们就真正实现了移动端的自适应。
0 条评论