rem布局

互联网上的 自适应 方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用 rem 实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。 以下摘自： 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的 rem 布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的

转自： http://www.cnblogs.com/lyzg/ 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 1. 问题的引出 最近阅读白树的博文《 移动web资源整理 》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码： html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

/*　　doc:不用管：document对象　　win:不用管：window对象　　design:注意：设计稿的尺寸/物理像素*/ (function (doc, win,design) {// alert(123) var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>design){ docEl.style.fontSize = 100 * (clientWidth / design) + 'px'; } else if(clientWidth==design){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / design) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc,

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容 ）： 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： via 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：原文来自：http:/

　　从博主学习前端一路过来的经历了解到，前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题，这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案，希望能够帮助到一些从PC端转战web移动开发的小伙伴，因为是第一次写博文，写得不好的地方也希望大家多多包涵啦(*^__^*) 嘻嘻……（ps:文章有点长，如果你现在时间紧迫，那可以先收藏，等到有时间了再回头慢慢品尝喔） 首先我们一起看看这篇打通博主web移动开发任督二脉的武功秘籍吧（ 以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容 ）： 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

1.截出来的图会有白边 看了很多代码，感觉有点麻烦，后来灵机一动，直接把画布缩小了一点，白边就直接不显示了，不过这个方法比较投机 $("#save").click(function() { var width = $('.box').width() - 1; //截出来图片有白边，把画布减少一点， var height = $('.box').height() - 1; html2canvas($('.box')[0], { width: width, height: height, useCORS: true, //跨域图片 }).then(function(canvas) { var img = new Image() img.src = canvas.toDataURL('image/jpeg') img.style.cssText = 'position:absolute;width:70%;left:15%;top:4%;z-index:9999;' $('.mask2').append(img) console.log("生成图片了") }) 2.微信头像截图时好时坏，截出的文字有些会有偏移 一开始以为是跨域图片的问题，搞了挺久，后来网上看到说这个插件 对flex的布局兼容比较差，并且最好不要用rem来设置字体，后来试了一下，果然是flex布局的问题

讨论适配方案之前，先了解几个移动端的概念。 基础概念 设备像素(device pixels)： 又称为物理像素，是显示屏的最小物理单位。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 设备独立像素(device independent pixels): 基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。例如meta里面设置width=device-width，这个device-width就是设备独立像素。 在chrome里 看到的375x667 320x480等等都是设备独立像素，其数值上等于CSS像素数组。 设备像素比(device pixel ratio)： 简称dpr，定义了设备像素和设备独立像素的对应关系，它的值可以按公式得到： 设备像素比 = 设备像素/设备独立像素 目前了解到有三种方法实现适配： 固定高度，宽度自适应 利用rem布局，viewport缩放 vw适配 固定高度，宽度自适应 垂直方向用定值，水平方向用百分比、定值、flex都行。这样设置之后就可以不用管手机屏幕的尺寸进行开发。该方法使用了完美视口： <meta name="viewport" content="width=device-width,initial-scale=1"> 但是该方法有个缺点，由于高度固定，会导致页面产生横向拉伸的视觉效果。