本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的是<h

一.怎么让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,用

表格 图片等 宽度自适应  :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/

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

一. 流程 设计师以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

基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react.js开发的PC端自定义Layer弹出框组件.支持超过30+参数自由配置,通过轻巧的布局设计.极简的调用方式来解决复杂的弹出层功能,为您呈上不一样的弹窗效果. RLayer在设计开发之初有参考之前的VLayer组件,尽量保持功能效果的一致性. 如上图:展示一些常用的基础普通型弹窗功能. 极简调用方式

图片预加载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 () {//加载完成 } })

一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏的statusBar高度问题. 三.适配方案 通过获取屏幕纵横比来判断是否为全面屏 1.获取宽高 const {width,height} = Dimensions.get('window') 2.计算纵横比 const wh = height/width 3.全面屏手机一般纵横比wh大于1.8,正

<script> //mode 移动端的适配方式 按需 传参 目前只有两种 px和rem (function(win, doc, mode) { var std = 750; if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) { var h = document.getElementsByTagName("head")[0];

一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单.发送消息.表情(动图),图片.视频预览,浏览器截图粘贴发送等功能. 二.技术选型 MVVM框架:react / react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具

PC端 特点 PC端的屏幕具备以下特点: 屏幕大小一般是大于 13.3英寸 用户会经常拖拉浏览器的大小 原因 正是因为 PC端上的浏览器大小会经常被改变,而且改变的范围还很大,用户会全屏浏览器,用户也会缩小浏览器到一个很小的值,如600px左右. 所以pc端上如果使用流式布局(百分比布局),会导致页面很难看. 解决 所以,PC端上只能通过版心布局来解决这种情况. 当屏幕大于版心宽度时,版心居中显示 当屏幕小于版心宽度时,屏幕出现一个横向的滚动条,这种方案几乎所有的PC端网站都在采用. 案例 代码

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

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

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

pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 所有主流浏览器都支持这个设置,包括IE9.对于那些老式浏览器(主要是IE6.7.8),需要使用css3-mediaqueries.js 2. 不

适配移动端操作如下: 安装 postcss-pxtorem .amfe-flexible npm i postcss-pxtorem npm i amfe-flexible amfe-flexible(可以安装,可以自己写),如下是我通过 amfe-flexible 修改的flexible 文件: (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.device

前端适配苹果刘海屏,安卓刘海屏水滴瓶 其实w3c早就为我们提供了解决方法(CSS3新特性viewport-fit) 在w3c.org官方给出的关于圆形展示(Round display)的标准中, 提到了viewport-fit这一属性,这个属性表明了对于某些屏幕并不是矩形形状的设备的时候浏览器该如果进行显示.LOL传送:viewport-fit官方参考文档 CSS3新特性env以及var预定义变量. 在定义以后viewport-fix以后, 浏览器会自动生成四个padding变量,即用来将页面向

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

概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大.解决方案:css里 *{margin:0;padding:0;} 2>块属性标签同时设置了横向margin值和float属性后,在ie6显示的横向margin比设置的大一倍问题症状:常见症状是ie6中后面的一块被顶到下一行碰到频率:90%(稍微复杂点的页

除了基本的业务逻辑功能测试之后,H5页面的测试,需要关注以下几点: 1.  通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.  横屏竖屏相互切换,能自适应,并且布局不会乱掉: 3.  关注页面请求,是否会有多余的请求,或者请求后有多余的数据返回,尽量精简,否则会浪费流量. 4.  对于商品名称.标题长度的问题,在手机上最好能根据屏幕大小自适应而不是截断,因为手机上是不会有tips可以看的.截断导致大屏幕下也只能显示几个字,界面显示不友好. 5.  手指滑动是否流