自适应和响应式的介绍和区别-蒲公英云

自适应和响应式的介绍和区别

悠悠 2021-07-04 12:23 483阅读 0赞

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

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

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

自适应（Adaptive design）:不同设备的代码是不一样的，
响应式（Responsive design）：所有设备的代码是一样的。

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

意思是如果屏幕宽度小于400像素，就加在tinyScreen.css文件。
那么自适应的实现方式有哪些呢？

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

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

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