pc端响应式布局教程,pc端和手机端响应式布局

首页 > 经验 > 作者:YD1662022-10-25 08:55:57

编辑导语:响应式设计成为主流设计趋势,为什么所有的web端都需要响应式设计,其目的是什么?作者从其实际角度出发,分享响应式设计思路及方法,供产品和设计同学参考。

pc端响应式布局教程,pc端和手机端响应式布局(1)

响应式设计概念自2010年提出以来,经过十多年的发展与普及,在我国已经有超30%的占有率,且正在以每年5%的速度,逐渐取代传统静态布局网页。经过断断续续近两个月的时间,我把自己在多年产品设计中积累的经验,整理分享如下。本文将从实际应用角度,介绍响应式设计思路及方法,供产品和设计师同学参考。

一、适用范围

是不是所有的web端产品都需要响应式设计呢?且看分析。

1.1 响应式设计的意义

响应式设计之所以会成为主流趋势,是因为从各利益相关者角度,皆具有极大的优势。

从公司角度:一次开发成型,节省开发和运维成本,同时能提升品牌一致性。

从产品角度:在不同的用户设备上,保持一致性的使用体验,输出稳定的产品价值。

从用户角度:不限制设备,不限制使用时间和条件,使用更加便捷。

1.2 网页布局设计的分类

按照网页对分辨率的适配程度,把布局设计区分为三类。

A. 固定布局设计

pc端响应式布局教程,pc端和手机端响应式布局(2)

实现方法:内容宽度固定,布局不根据设备分辨率改变。

设计方案:出一套设计方案,以像素做单位。

B. 自适应设计

pc端响应式布局教程,pc端和手机端响应式布局(3)

实现方法:前端写几套代码对应不同类型设备(如pc端、平板、手机),通过检测视口分辨率,来判断当前访问的是哪种设备,从而显示对应的代码。

设计方案:先为每类设备分别出一套设计,然后在一类设备的分辨率范围内指定元素的兼容方式;同一类设备的分辨率差异较小,因此兼容方式相对简单。

C. 响应式设计

pc端响应式布局教程,pc端和手机端响应式布局(4)

首页 12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.