响应式网站中的图片怎么设置?

来源:EIdea编辑:niubei浏览量:1607
  在当前这个移动互联网时代,人们在互联网上获取信息的方式已从桌面端浏览器逐渐过渡到移动浏览器了。在现在这个多终端的智能设备时代,有的人用电脑、有的人用笔记本、有的人用平板、有的人用手机,还有的人用电视上网,就算是针对某一个人而言,也是一天会同时用到电脑和手机,以应对上班和下班的需要。


  而传统的网站布局几乎都是固定宽度的,其目标是让所有用户都拥有一样的用户浏览体验。传统的网站布局并不能很好地适应多屏幕浏览需求,不能根据不同的屏幕尺寸去自动调整页面效果,给用户带来了很不好的使用效果。此时应运而生出响应式网站,它可以针对不同的终端显示出不同的页面布局,真正做到一次开发多次适用。

  响应式网站设计是一种网络页面设计布局,它可以集中创建页面的图片排版大小,智能地为用户的设备环境选择出相对应的布局。响应式网站设计可以让一个网站同时适配多种设备和多种不同分辨率的屏幕,让网站的布局和功能随着用户屏幕大小、设备屏幕的不同而变化。 它有以下优点:1.用户体验好2.维护成本低3.分享方便4.视觉统一5.可以嵌套进app。目前,响应式网站已成为最新的建站趋势。在国外,已经基本上网站响应式化。而国内的网站却大多数还处在移动端网站与PC端网站分离的阶段,只有极少的公司使用了响应式技术,这就导致了国内响应式得不到发展。

  随着网站建设的不断发展,企业对网站的要求也越来越高。使用一个响应式网站可以极大提高企业形象。

  但很多朋友在设计响应式网站时会遇到很多问题,今天易点前端工程师就给大家带来说说在设计响应式网站时,图片应该如何设置的话题。

  首先看图片是以什么方式存在,如果是以背景方式存在,可以采用css3媒体查询,为不同尺寸的显示终端设置不同图片。

  因为媒体查询包含媒体类型和零个或多个检测媒体特性的表达式,width、height和color等特性都可以用于媒体查询,使用媒体查询,可以不用修改网页内容本身,就可以让同一个页面适配不同的设备。CSS3规范包含很多模块,媒体查询只是其中一个模块。利用媒体查询,网站开发人员可以根据显示设备的不同特性和能力来确定要应用的样式表。比如,可以根据viewport的宽度、屏幕的宽高比和朝向(水平或垂直),只用简单的CSS代码就可以达到改变网页内容的显示方式。


  但如果是网页中插入的图片解决起来就比较复杂一点了。


  一、采用srcset属性,如下代码

  srcset里面是根据媒体查询条件显示不同图片,1x表示显示器像素密度显示倍数。


  二、采用picture元素,如下代码


   
今天的分享就到这里,欢迎大家踊跃留言!

响应式案例欣赏

奇柯集团

集团企业官网设计

小牛资本

金融投资行业官网定制

中保小额贷款

定制设计响应式官网