移动端与PC端设计的几项要点

一、移动端与PC端的区别

1、屏幕尺寸不同

PC端屏幕大，视觉范围更广，可设计的地方更多，设计性更强，相对来说容错度更高一些有一些小的问题不容易被发现。移动端设备相对来说屏幕较小，操作局限性大，在设计上可用空间比较少，在小小的屏幕上使用粗大的手指操作也需要在设计中避免原件过小过近。

2、网络环境不同

PC端设备连接网络更加稳定，而移动端可能遇到信号问题导致网络环境不佳，出现网速差甚至断网的问题，需要在设计中充分考虑网络问题，更好地设计相应的解决方案。

3、传感器不同：

移动端设备完善的传感器是PC端设备望尘莫及的，压力、方向、重力、GPS、NFC、指纹识别、3Dtouch、陀螺仪等，因为这些传感器的存在才使得产品在设计中巧妙地使用传感器能让产品添姿加彩。

4、使用场景与使用时间不同

移动端设备不受局限，随时随地想用就用，所以使用时间更加灵活，时间更加碎片化，所以在操作上更偏向于短时间内可完成的；因为PC端设备的使用场景多为在家或者学校公司等一些固定的场景，所以其使用时间偏向于持续化，在一个特定的时间段内持续使用。

二、移动端开发与PC端开发的区别

1、在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。另外包括移动端弹出的手机键盘的处理，

2、在布局上，移动端开发一般是要做到布局自适应的，适应性比较好的有rem和vw。

3、在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单、效率又高。

4、PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

三、rem的缺点与优势

rem弹性布局，在html文件头部需要放入一大段压缩过的js代码，而vw能让你的代码更纯粹；

缺点之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；

缺点之二：html文件头部需插入一段js代码；

rem的优点：移动端rem布局比vw主流的原因兼容性；

vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。

四、vw单位实现弹性布局

viewport即浏览器可视区域大小。100vw = window.innerwidth, 100vh = window.innerheight
在移动端可以认为，100vw就是屏幕宽度。若使用vw布局，不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可。

移动端与PC端设计的几项要点相关推荐

移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
js判断移动端，pc端，安卓，苹果浏览器的方法
js 判断安卓或者ios 之indexOf方式(一) //判断访问终端 var browser={versions:function(){var u = navigator.userAgent, ap ...
360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案！
你还在为苹果自带的safari浏览器打不开网页而苦恼吗,接下来的答案会帮助你解决苦恼. 苹果自带safari浏览器的设备分为两种:移动端.PC端.因此不同设备出现safari浏览器打不开网页的情况需要 ...
js 判断移动端还是pc端，ios或者android
js 判断移动端还是pc端,ios或者android 法一: function IsPC(){ var userAgentInfo = navigator.userAgent;var Agents = ...
vue 判断移动端、pc端
判断移动端或pc端经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. 先写个方法: //APP.vue isMobile ...
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
C#和JQ判断移动端还是PC端
判断移动端还是PC端浏览网页可以使用两种方法: 1.在C#语句进行判断 /// <summary>/// 判断是移动端/// </summary>/// <returns ...
java 判断手机访问_java后台如何判断是移动端还是pc端的访问请求
java后台如何判断是移动端还是pc端的访问请求主要是根据 HttpServletRequest request 中的请求头所带的参数 user-agent来获取: String userAge ...

移动端与PC端设计的几项要点

移动端与PC端设计的几项要点相关推荐

最新文章

热门文章