自适应与响应式的区别？

随着显示器的越来越多，以及笔记本的普及，逐渐出现了新的布局方式：百分比宽度布局和流式布局。这里先说一下这两种布局的区别：

百分比宽度布局：宽度使用百分比，文字使用em,更多的使用rem,也就是所说的高清方案。
流式布局：以Google为代表的渐进增强，流式布局，如float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

接下来回归正题，这两种方式的解决问题是不一样的，自适应是为了解决如何才能在不同大小的设备上呈现相同的页面。手机屏幕的宽度一般在600像素以下，PC一般在1000像素以上，部分配置高的在2000像素以上，那么就让同一张网页自适应不同大小的屏幕，根据屏幕的宽度自动调节网页的内容大小，而它们主题的内容和布局是没有变化的。

自适应（Adaptive design）:不同设备的代码是不一样的，

响应式（Responsive design）：所有设备的代码是一样的。

允许网页的宽度自动的调整
尽量少使用绝对的宽度，多点百分比
相对大小的字体：不要使用px写死，最好使用相对大小的em,或者高清方案rem,这个单位不限制于字体，别的属性也可以这么设置
选择加载CSS，

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

意思是如果屏幕宽度小于400像素，就加在tinyScreen.css文件。

那么自适应的实现方式有哪些呢？

网页宽度自动调整，在网页代码的头部加入一行代码，

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，这行代码的意思是网页宽度默认等于屏幕宽度（width=device-width）,原始缩放比例（initial-scale=1）,即网页初始大小占屏幕面积的100%。

少使用绝对宽度，使用百分比来替代，当然也可以配合CSS的cal，进行计算宽度。
选择加载CSS，自适应网页的核心是CSS3引入的Media Query模块，它的意思就是自动探测屏幕宽度，然后加载相应的CSS文件，

<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)"  href="tinyScreen.css" />

CSS的@media规则，同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则，

@media  screen and (max-device-width: 400px) {  .column {  float: none;  width:auto;  }  #sidebar {  display:none;  }  }

图片的自适应，只需要一行代码，img{ max-width: 100%; },这行代码对于大多数嵌入网页的视频也有效，可以写成img,object{ max-width: 100%; },老版本的IE不支持max-width,所以只好写成img{ width: 100%; };此外windows平台缩放图片时，可能出现图片失真现象，可以尝试IE的专有命令，img{ -ms-interpolation-mode: bicubic;},或者Ethan Marcotte的imgSizer.js，
```
addLoadEvent(function() {  var imgs = document.getElementById("content").getElementsByTagName("img");  imgSizer.collate(imgs);  }); 
```

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

项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery
网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...
网页自适应和响应式的区别与分析总结
参考链接: https://my.oschina.net/liu-xuewei/blog/345580 https://www.zhihu.com/question/24334181 Responsi ...
自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
响应式 - 创建自适应的响应式字体
前言该技巧是一个简单的响应式字体示例.它将演示如何使用新的尺寸单元REM.REM的意思是根EM(Root EM).如果使用EM单元,意味着字体尺寸与根元素字体尺寸有关,而不是父元素字体. 准备工作 ...
响应式分布式区别_边缘计算的七种定义，边缘计算与云计算、雾计算的区别
一.概述边缘计算是一个分布式计算的范式,正如云计算也是一个分布式计算的范式. 由于行业.技术背景等不同,边缘计算在不同人眼里是有一定差异的.我们先来看看不同专家是如何定义边缘的,然后介绍边缘计算处理 ...
vue vue的table表格自适应_响应式表格,HTML表格自适应（responsive table）
简单自适应表格前面的一篇文章里面我介绍到了一种简单的自适应表格制作方案,就是通过给表格的外面加了一个.table-container的标签 .table-container { width: 100 ...
如何实现自适应页面 (响应式布局)
当我们在做网页时,应当充分考虑到网页自适应的问题否则可能会出现同一个网页在不同的屏幕尺寸上排版布局混乱的情况方案一:用比例控制大小在网页代码的头部,加入一行viewport元标签 <met ...
帝国CMS资讯自适应HTML5响应式源码,简单而不简约自适应HTML5响应式文章新闻帝国CMS网站模板整站手机...
版本更新模板已经适配到最新帝国CMS7.5(部分早期源码模板没有适配到最新)!截止2019-持续追踪更新针对机房黑产利用,和帝国CMS一个XS漏洞利用方法的堵截!正式版已补,请已运营的小伙伴找我查看 ...
zblog php 手机模板,Zblog主题模板自适应手机响应式ZblogPHP简洁博客主题
常用js功能函数集合 1.获取随机时间戳 function uniqueId(){ var a=Math.random,b=parseInt; return Numbe ...

自适应与响应式的区别？

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

最新文章

热门文章