自融入网页页面设计方案 为不一样机器设备出示

2021-02-22 09:51| 发布者: | 查看: |


自融入网页页面设计方案 为不一样机器设备出示不一样的网页页面


伴随着3G的普及,愈来愈多的人应用手机上上网。

挪动机器设备正超出桌面上机器设备,变成浏览互联网技术的最多见终端设备。因而,网页页面设计方案师迫不得已应对1个困难:怎样才可以在不一样尺寸的机器设备上展现一样的网页页面?

手机上的显示屏较为小,宽度一般在600像素下列;PC的显示屏宽度,1般都在1000像素以上(现阶段流行宽度是1366 768),有的还做到了2000像素。一样的內容,要在尺寸迥然不同的显示屏上,都展现出令人满意的实际效果,其实不是1件非常容易的事。

许多网站的处理方式,是为不一样的机器设备出示不一样的网页页面,例如专业出示1个mobile版本号,或iPhone / iPad版本号。这样做虽然确保了实际效果,可是较为不便,另外要维护保养好几个版本号,并且假如1个网站有好几个portal(通道),会大大提升构架设计方案的繁杂度。

因而,很早就有人构想,能不可以 1次设计方案,广泛可用 ,让同1张网页页面全自动融入不一样尺寸的显示屏,依据显示屏宽度,全自动调剂合理布局(layout)?

 

1、 自融入网页页面设计方案 的定义

2010年,Ethan Marcotte提出了 自融入网页页面设计方案 (Responsive Web Design)这个名词,指能够全自动鉴别显示屏宽度、并做出相应调剂的网页页面设计方案。

他制做了1个案例,里边是《福尔摩斯历险记》6个主人公的头像。假如显示屏宽度超过1300像素,则6张照片并排在1行。

 

假如显示屏宽度在600像素到1300像素之间,则6张照片分为两行。

 

假如显示屏宽度在400像素到600像素之间,则导航栏栏移到网页页面头顶部。

 

假如显示屏宽度在400像素下列,则6张照片分为3行。
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部