15900627980

如何在屏幕大小不同的物理设备上获得类似的使用体验

发布于:11-19
随着科技的发达,使用移动设备诸如手机平板等获取信息,社交的人越来越多。如何在屏幕大小不同的物理设备上获得类似的使用体验呢? 很多网站的做法是为不同大小的物理设备提供不同的网页。但是这样做很麻烦,需要维护多个版本,不够方便。如果只写一个版本,但是可以适应不同宽度的物理设备,那该多好。自适应网页设计(Responsive Web Design)应运而生。

2知识剖析

什么是自适应网页设计? 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。简单来说就是同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)。

3常见问题

问题1:如何实现自适应网页设计?

问题2:viewport的作用。

4解决方案

1在网页代码的头部
加入一行meta标签:meta name="viewport" content=content="width=device-width, initial-scale=1"这段代码意思是说网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。viewport是应对手机模式访问网站,网页对屏幕而做的一些设置。设置viewport后,移动页面就可以进行拖动,放大缩小。 这行标签在编译时会转化成如下的语义:viewport { width: device-width; initial-scale: 1.0; }

2不使用绝对宽度
使用相对单位 具体来讲CSS代码不能指定像素宽度为xx px;只能指定百分比宽度width: xx%;或者width:auto;字体只能使用相对大小(em,rem,vw,vh,vmin,vmax)等。

3流式布局
随着物理设备尺寸变小,内容将会占据更多的垂直空间,下方的内容会被往下推。这就是所谓的流动。

4通过媒体查询
选择加载CSS //不超过600px,字体大小为默认

5编码实战

6扩展思考

<1>何时选择自适应式网页设计?
1以网站的目标族群来考量
纯粹找资料>手机版网页

如果你的网站使用者只是使用行动装置来找资料的,那就抛开酷炫效果的设计,只留下必要的资讯,也就是做单独的手机版网页。

购物行为(线上购物车) >手机版网页

如果你希望使用者能在你的网站上有行动装置购物的行为,那么你也应该要选择手机版网页设计。去掉无用的装饰花边,将商品分类选项重新设计,让手机萤幕专注在购物的流程以及产品的展示上,这样才能获得大众的使用意愿。

资讯阅读(部落格) >手机版网页

如果你的网站文字资讯量很大,如报纸、杂记等网站,手机版网站也会是首选。

基本上只要不涉及以上三种要素,都可以做自适应网页。

2以网页设计排版角度来考量
˙结构复杂>手机版网页

如按钮、分类等可以超连结的元件很多,或是喜欢电脑版有许多花边元件的网站业主,建议做手机版网页设计

<2>自适应和响应式的区别


自适应:让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)
 



响应式:响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询)。总体目标就是去解决设备多样化问题。 可以说响应式布局包含了自适应布局,但是响应式的成本会更高,因为它需要考虑不同页面宽度下不同的页面布局,而自适应只考虑页面能自适应屏幕不溢出就够了

自适应 网页 宽度 网页设计 屏幕 手机版 网站 响应式 设备 版本

上一篇:店铺首页如何抓住客户眼球并合理利用聊天工具做成交

下一篇:返回列表

相关内容 观察行业视觉,用专业的角度,讲出你们的心声。
Back

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。

十见(上海)网络科技有限公司 Copyright© 2014-2020 沪ICP备20008988号-2