上一篇文章<为什么选择iPhone5的分辨率作为H5视觉稿尺寸>最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的尺寸,一套是窄屏手机(如iPhone4),另一套是宽屏手机(如iPhone5),这样的好处不仅减少重构页面的适配成本外,也在页面展现上提升页面的用户体验. 然而不管是设计2套还是3套以上的视觉稿来辅助前端来完成页面,最终还是会抵挡不住设备更新换代带来的适配问题,移动设备不断从低分辨率到高分辨率过渡,不同分辨率…

http://www.cnblogs.com/PeunZhang/p/4517864.html…

7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同时也提升页面体验,分享后跟设计师们沟通,反应情况良好,说明这套适配的方案是有一定价值的.在9月份很荣幸收到TID同事的邀请,参与[TID重构主题交流会]第六期:体验的前端分享,于是在设计师篇的基础上重新整理了前端篇,通过分析当前市场的数据,结合实际的项目需求,总结出适配各种移动设备分辨率的思路和解决方法,相信…

上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前端组内做了分享,后来师傅跟我聊了下,其实现在前端和设计的合作上经常遇到页面适配问题,在沟通上影响工作效率,在页面设计上影响用户体验. 所以决定准备给设计师们带来H5适配的分享,内容大概是了解H5页面适配等问题,以便更好得配合前端完成页面,提升页面体验. 于是,在工作的业余时间,我把想到的点记录下在本子,经过几…

一. 流程 设计师以750pt×1334pt尺寸进行设计(当然高度随内容变化),最后用该尺寸的设计稿进行标注.切图,前端采用淘宝的开源方案flexible进行适配. 二. flexible使用方法 Flexible的使用方法非常简单,只需要引入flexible_css.js和flexible.js 下载地址 l  第一种方法将文件下载后放入项目中引用(省略写法,大家都懂的) l  第二种直接使用阿里CDN资源 <script src="http://g.tbcdn.cn/mtb/lib-f…

最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { url = window.URL.createObjectURL(f…

表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及应用 原文: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 大漠的文章(简洁):https://github.com/amfe/article/issues/17 giuhub:https://github.com/…

一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 解释:Viewport指用户网页的可视区域,content中的“width”指的是虚拟窗口宽度,上面代码意为虚拟窗口/页面宽度初始比例为1,最小比例为1,最大比例为1,用…

图片预加载jquery插件 jquery.imgpreload var load_img = [];load_img.push('http://m.pubuzhixing.com/Images/vote/music.gif');load_img.push('http://m.pubuzhixing.com/Images/vote/music_off.png'); // 资源图片加载jQuery.imgpreload(load_img, {all: function () {//加载完成 } })…

em  参照本身元素的 font-size rem 参照 html 根元素 的 font-size 1. rem 适配   (同一元素,在不同设备上,效果一样) 适用情况: 当页面大于 独立像素375 时,或者页面元素很多时 原理 页面中的元素,统一 单位 rem(字体使用 px 而不使用 rem) 根元素字体大小 设置成 整个屏幕的宽(1 rem = 375px),然后元素的 css 像素根据占据屏宽,使用 rem // 适配 (手写 面试题) (function(){ /* 1. 创建 st…

建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金:ConardLi) 这里针对这篇文章提几个建议而已: 1. 使用 pt 单位, pt:磅,相信用过 word 编辑文档,尤其做论文时应该深有体会吧,而且打印机也是用的 pt 做单位先将文件转换成 pt 单位的尺寸后再打印的,纵然有一定的历史原因,但是如果你用像素来打印显然没有 pt 的清楚,所有编辑…

1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href="mailto:johndoe@sample.com">发送邮件</a> 2.调用 拨打手机 <a href="tel:400-888-9999">400-888-9999</a> 3.调用 短信 <a href="sms:…

(一) 由于手机生产商越来越多,不同手机的硬件尺寸又不尽相同,这就给我们的设计适配造成很大困扰.但我们可以围绕从基准分辨率设计,上下进行兼容适配的原则来进行快捷操作.以IOS阵营为例: 图注:移动适配流程 1. 将iphone6分辨率作为基准分辨率,以750px*1334px进行设计,设计定稿后在750px的设计稿上做标注,输出标注图.同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图. 2. 输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度75…

设备像素比(dpr)= 物理像素(手机渲染像素.分辨率)/设备独立像素(手机所显示元素的大小) 视口(viewport) 布局视口(获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条.边框和外边距.): document.documentElement.clientWidth / clientHeight 视觉视口(获取浏览器视觉视口高度(包括垂直滚动条)): window.innerWidth / innerHeight 理想视口(屏幕大小,设备的分辨率/设备像素比): screen.wi…

首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips 好了,到了这里有出来了两个概念,物理像素 和  dips 物理像素,比较好理解,一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调…

1.DeviceFamily-Type文件夹 将Index.xaml拷贝到DeviceFamily-Desktop 和DeviceFamily-Mobile,删除这2个目录下的Index.xmal.cs 文件. 2.DeviceFamily-Type扩展 通过创建新的XAML视图达到同样的效果,使用同样的名称,但是DeviceFamily-Type是扩展的.比如MainPage页面,它意思是添加一个新的XAML视图文件叫MainPage.DeviceFamily-Mobile.xaml,它放在和…

拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细的开发实施之前,我们要先了解一些基本概念. 一些基本概念 在进行具体实战之前,首先得了解下面这些基本概念(术语): 视窗 viewport 简单的理解,viewport是严格等于浏览器的窗口.在桌面浏览器中,viewport就是浏览器窗口的宽度高度.但在移动端设备上就有点复杂. 移动端的viewpo…

iphone6 及 iphone 6 plus 已经出来一段时间了.很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H5页面大部分都以320px为基准宽度进行布局,那些大屏屌丝android用户也懒得去理,而现在iphone也搞起多屏幕,老板们重视程度就不一样了. 回归正题,兼容iphone各版本机型最佳的方式就是自适应. 1.viewport 简单粗暴的方式: 1 <meta name="viewport&…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

iphone6 及 iphone 6 plus 已经出来一段时间了.很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H5页面大部分都以320px为基准宽度进行布局,那些大屏屌丝android用户也懒得去理,而现在iphone也搞起多屏幕,老板们重视程度就不一样了. 回归正题,兼容iphone各版本机型最佳的方式就是自适应. 1.viewport 简单粗暴的方式: <meta name="viewport&qu…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtml 目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重.无论是设计APP还是写前端H5.都是要考虑移动端的兼容性. 25学堂今天跟大家来回顾一下H5页面去适配所有iPhone和安卓机型的一些技巧和办法. 回归正题,兼容iphone各版…

一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配,笔者想起了自己的以前写过的一个转换小工具, 大家可以看之前我的文章和我一起使用postcss+gulp进行vw单位的移动端的适配 老实说,笔者根据之前的记录,根本就没有还原出小工具,实在是汗颜.不过,在笔者实在无法精确还原工具之后,笔者找到了之前练习的demo. 笔者一下子就搞定了. 先给大家看下项…

原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script> 将代码中的{{version}}换成对应的版本号0.3.4. flexib…

兼容iphone各版本机型最佳的方式就是自适应. 1.viewport 简单粗暴的方式: 1 <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> 直接设置viewport为320px的1.3倍,将页面放大1.3倍. 为什么是1.3? 目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone…

1.先说说几个前端常用的几个单位的概论: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,…

flexible是淘宝提供的一套REM手机适配的库,用法也非常简单 首先,在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式),或者通过cdn方式引入 然后通过实际的px大小/根元素font-size的大小,就得到了rem的值,这里提供了一个sublime的cssrem的插件,可以快速将px转换成rem值, 插件地址https://github.com/flashlizi/cssrem 安装使用 安装 ● 下载本项目,比如:git clone ht…

1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http://blog.csdn.net/u010377383/article/details/77963973 (Flexible实现手淘H5页面的rem布局适配) 3.http://blog.csdn.net/zhanglong_web/article/details/78649717 (vue移动端f…