一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devic…

最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解,趁着这段时间有点闲就整理了一下自己的移动端rem适配方案: 1.思路很简单,首先我们得明白一样东西,就是viewport,简单的说就是我们打开谷歌浏览器模拟手机不同型号时看到的不同像素比例大小,i5为320x568,i6为375x667,其它的就不一一列举了,现在假设我们ui给出的设计图大小是750…

H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目录的 font-size 为 18px,则 1rem=18px 媒体查询设置 @media screen and (min-width: 320px) { html { font-size: 32px; } } @media screen and (min-width: 375px) { html…

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

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

对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案. rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem=20px;2rem=40px.....,因为移动端的屏幕特殊之处,主要是不同类型手机像素比dpr的不同,所以不能直接使用px来进行设置元素的尺寸,这里就需要引入一个可以兼容各种尺寸的解决方案,rem便是很好的一个,而对于rem的设置,我们是通过javaScript动态来设置,通过获取设备屏幕的宽度来…

引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案 下载地址https://github.com/hupan508/lib-flexible 注意点. 1.如果html设置过 meta  ,js将使用meta 标签的缩放. <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="…

一.px 自动转换为rem sublim Text3 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录(在Sublime安装目录下找文件夹):Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里. 重启Sublime Text. 二.sublim Text 配置参数       参数配置文件:Sublime…

需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-loader插件将第三方ui库的px转换成rem单位. (1) npm install px2rem-loader --save-dev 安装插件(2)然后在vue-cli项目找到built/utils文件,在里面加上以下代码: var px2remLoader = { loader: 'px2rem…

本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板:Github 使用:1.下载完成后首先修改js文件中的基本单位:psd宽度是640就写640,是750就写750.现在的设计稿大部分是以iphone 6 为基准设计的,也就是750px. 2.切图时,我们以100px为基本单位(至于为什么是100px,自己看看我的js代码就知道了),每个元素的宽高,…