在设计网站的时候，网页banner放到移动端里展示很难看怎么办？
用<picture>标签呐
响应式
一、响应式设计的由来
在手机、平板这类小型化设备出现之前，是没有响应式设计这个概念的，以前的开发者只需设计一版PC端网页即可。后来随着iPhone等智能设备的风潮席卷世界，移动端浏览器技术逐渐成熟，用户在移动设备上对网页内容的需求爆棚，此时的移动端必须受到重视。针对移动设备的特点（比如屏幕小、带宽小、资费贵），初期的开发人员为移动设备专门搭建了另外的站点（像这样：m.domain.com.），当用户使用移动设备访问主站点时，服务端的探测脚本会根据探测到的结果去重定向到移动站点上去。但问题是探测脚本有时候并不靠谱，导致用户依然停留在主站点上，用户体验很差。
直到2010年，Ethan Marcotte在文章Responsive Web Design中提出了“响应式设计”的概念，他指出鉴于移动设备数量疯长和M.dot站点的不理想，我们还是应该回归网页流体自然的本质。他提出的相对单位使得无论设备的尺寸大小，设计者都能灵活地进行布局。
（二）、响应式设计的优点和缺陷
响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，本意是使原本PC上的网站兼容手机和平板。大部分响应式网页是通过媒体查询，加载不同样式的CSS文件实现。
同时，当网页中需要图片这种媒介时，最初的响应式处理方式缺点也就暴露无遗：一般在手机上访问响应式网页里的图片时，只是把图片分辨率做了一个缩放，手机还是下载了那一张大图片，一般手机又没有Retina屏，很浪费带宽。而且现在手机网速也不是很快，打开一个这种网站要耗费很长时间。
<picture>标签
<picture>标签用法和HTML5的<video>类似：
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<img srcset="small.jpg">
</picture>
通过媒体查询的方式，根据页面宽度（当然也可以添加其他参考项）加载不同图片。这样不仅节省带宽还能使得图片更加适配内容。有些在大屏里看着比较舒服的图片，在手机上看会觉得太小，里边的东西看不清；即使手机分辨率是1920×1080，PC和手机上的图片宽度都是1000，显示的效果也应该不一样，手机上的图片应当更加注重放大细节。
(A)在电脑上显示的图片
(B)在手机上显示的图片
上边图(A)和图(B)的内容一样，只不过(B)放大了(A)的主体部分，但是画面效果看起来不一样。如果图(A)显示在PC显示屏上，看起来会比较合理，实际上大部分图片在设计时，都考虑的是PC上的显示效果；如果在手机页面里显示，会一下显得比较小，抓不住重点，明显没有没有显示图(B)的效果好。而且在PC上显示的长条图片，在手机里最好把宽高比在调整的小一点。
总之，在设计响应式页面的时候，针对不同设备加载不同图片不仅能节约带宽，而且能有更好的显示效果。虽然图片差别不大，但是追求体验的用户能感觉出来，细节决定成败啊，网页上大部分功能都很好实现，好网页和差网页最重要的差别还是体验和速度。不过这样做也增加了前台做图的工作量。
网友评论