define(function (require, exports, module) { exports.mobileUtilMethod = function () { (function (e, t) { function n() { for (var e = navigator.userAgent, t = ["Android", "iPhone", "SymbianOS", "Windows Phone", "…

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWi…

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I…

一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib-flexible --save-dev 在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible', 在index.html中 是否 去掉meta name="viewport" 标签  要看框架具体情况,具体请看第四条, 2.第二 使用p…

flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,f…

前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增多,并且后期页面如果有改动,会变得越来越不易维护.em得根据父元素的字体大小来计算宽高,有很大局限性.用百分比来设置宽度局限性也大,首先是得计算每个元素占父元素的宽度,而且只能设置宽度的百分比,而高度则很难通过百分比来设置.所以最后的希望寄托在了rem上. rem与px 在讲rem实现方案之前,我们…

   在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方案和网易的解决方案,所以今天我就从这两方面入手深度了解这两个方案. 网易转换rem分析    首先网易的设计稿是基于iPhone5设计的也就是宽度640px.(先不考虑dpr的问题下面会说)然后设置1rem等于100px( HTML font-size为100px),相当于6.4rem = 100%…

设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于动态计算font-size (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ?…

移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可以做到的自适应效果: 当前,用FIneReport按某一尺寸做好的报表,如果在屏幕像素较大的手机上打开,我们可以做到自动放大,但是我们当前最多只能放大两倍.所以,在制作移动端报表时,尺寸要有所取舍了. 之前给一个客户做过移动端报表,实现了在iphone4.小米.华为P6.三星S4等手机上自适应的效果…

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I…

安装 lib-flexible 1.npm i lib-flexible 2.在项目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexible’ 3.添加meta标签  <meta name="viewport" content="width=device-width, initial-scale=1.0"> px 转 rem:安装px2rem-loader 1.npm i px2rem-loade 2.配置b…

做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解. 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同,特别与响应式的关系,在这里说一下我所理解的自适应,和其与响应式的区别.先说响应式设计,响应式设计表示在不同的屏幕尺寸下,都有良好的布局和内容表现,简单一点的说,就是一个页面可以适配多种不同尺寸的屏幕,而且看上去还是设计良好的.为了实现这个目的,可能会利用js或者css…

CSS9:动态 REM-手机专用的自适应方案 动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是专门的手机端,如果用电脑短访问网页布局就很奇怪就像用手机访问pc端没有自适应的网站一样 当别人问会不会移动端开发,说会就行了,因为我会了动态REM!手机专用 1.REM是什么 em:一个m的宽度.如果面试官问,就说是一个汉字的宽度.这个单位是相对于font-size的 rem:root em,根元素的font-s…

css中的单位很多,%.px.em.rem,以及比较新的vw.vh等.每个单位都有特定的用途,比如当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了用%,其他单位是很难做到的.所以不存在说某个单位是错误的,某个单位是最好的这种说法. 那本文说的页面适配,指的是同样的布局,在不同大小的屏幕上怎么进行缩放.控制间距.宽高.字号等大小. 页面适配的方式有很多: 使用px,结合Media Query进行阶梯式的适配: 使用%,按百分比自适应布局: 使用rem,结合html元素的font-…

将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 px2rem 你也可以设置一个配置文件 px2rem --config pxrem.config.js config 默认 config: { patterns: "**/*.css", pxToRemRatio: 0.01, ignoreCss: [], is…

将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 px2rem 你也可以设置一个配置文件 px2rem --config pxrem.config.js config 默认 config: { patterns: "**/*.css", pxToRemRatio: 0.01, ignoreCss: [], isReplace: fals…

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用…

概述 之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用. 我上一篇博文主要有2个误区,下面我一一记下来. 这篇博文参考了移动端适配方案(下). 适配方案 有多种适配方案: 百分比布局:高度和宽度用百分比.由于高度和宽度的百分比是按照父元素尺寸的,所以改动父元素会使子元素发生变化,非常难以维护. px布局:固定宽度,viewport缩放.就是全部用px,然后用js控制init…

概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是基于网易的移动端屏幕适配方案而来的. 思考 在移动端开发中,对于页面屏幕适配要解决哪些问题? 对于不同的dpr,图片会有模糊的情况,怎么适配? 对于不同的屏幕宽度,怎么适配? 对于不同的内容:容器,文字和图片,怎么适配? 对于移动适配,我个人希望达到的效果是,对于不同的屏幕,在视觉上为了方便阅读,页…

因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 举例子: 1.iphone6 2.iphone5 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 好…

偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.Vant作为一款优秀的移动端vue组件库,自然也是支持的.由于当下手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做才能更好地适配不同屏幕宽度的移动设备?因而,在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)…

一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(Instant Messaging,简称IM)以发展成为了最流行的网络应用之一.特别是近几年的迅速发展,即时通信的功能日益丰富,它不再是个单纯的聊天工具,它已经发展成集交流.资讯.娱乐.音乐.电视.游戏.电子商务等为一体的综合化信息平台. 2.国内背景 目前国内外及时通信软件IM(Instant Me…

1.rem简介   rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能. 2.rem兼容性 rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况.其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+.Ap…

前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能降低移动网络的流量费用.原图产生的 PNG.JPEG.GIF 和 SVG 图片一般都有很大的压缩余地.下文将重点介绍一款图片新格式:WebP,从而揭开它神秘的面纱. 解决方案:使用 WebP 优化图像 1.什么是 WebP ? WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式…

今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对单位.所不同的是,em是相对于元素的父元素的font-size进行计算:而rem是相对于根元素html的font-size来计算的.这样一来,rem就绕开了复杂的层级关系,实现了与em类似的功能. 1.sublime text2中安装REM-PX插件来实现px与rem间的互换. package co…

移动端开发注意事项——meta.rem以及弹性盒 随着人们对移动端的依赖程度的增强,前端开发对移动端的需求也越来越强烈.那么,在移动端开发中,有哪些事项是需要注意的呢? meta标签 在常规的pc端开发中,我们也经常饮用mate标签,如keyword,description等,在移动端我们需要注意的又有哪些呢? <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&q…

如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2rem呢? 因为 postcss-plugin-px2rem 这个插件  配置选项上有  exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换. 所以我们可以利用这个特性,把项目中的  node_module 文件夹排除掉.这样如果我们项目中是用了,前端UI…

今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用.那么px,em怎样区分呢? 1.px像素(Pixel),相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2.em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px) 任意浏览器的默认字体高都是1…

标签: rem这个单位对于移动端来说是比较强大的,所以这里给大家介绍sublime text 3将px换算为rem的插件的安装及使用,只要安装了这个插件,输入多少px,sublime就会提示相应的rem值,就不用自己去计算了!! 1.首先在这个地址:https://github.com/hyb628/cssrem.git  下载插件…

今天试验了下cssrem  在移动端如果需要px->rem非常方便 比较之前我自己用gulp提供的函数unit(70/@base,rem);转方便很多 1.git clone https://github.com/flashlizi/cssrem 2.进入packages目录:Sublime Text -> Preferences -> Browse Packages 3.复制下载的cssrem目录到刚才的packges目录里. 4.重启sublime 配置: 配置参数 参数配置文件:S…