rem介绍和原理网上都是,这里不具体介绍

以iphone6设计稿

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px';

  

  @function px2rem($px) {
$fontSize: .5px;
@return $px / $fontSize + rem;
}
.box {
width: px2rem(375px);
height: px2rem(375px);
background-color: green;
}

flexible.js

css之rem布局的更多相关文章

  1. 你不知道的css各类布局(五)之em布局、rem布局

    em布局/rem布局 em和rem的区别 在了解弹性布局前我们需要先知道em和rem rem:font size of the root element,rem是相对于根元素<html>来 ...

  2. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  3. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  4. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  5. REM 布局

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

  6. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

  7. (淘宝无限适配)手机端rem布局详解(转载非原创)

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  8. webapp,liveapp: 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  9. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

随机推荐

  1. 在Expression Blend中制作侧面为梯形的类棱柱体

    原文:在Expression Blend中制作侧面为梯形的类棱柱体 在上一篇"在WPF设计工具Blend2中制作立方体图片效果"( http://blog.csdn.net/joh ...

  2. matlab 高阶(一) —— assignin与evalin

    1. assignin assignin(ws, 'var', val) 将 val 值赋值给 ws 空间中的 var 变量,注意这里的变量,必须是 array 类型,而不可以是包含下标索引,如果在指 ...

  3. .net reactor 学习系列(二)---.net reactor界面各功能说明

    原文:.net reactor 学习系列(二)---.net reactor界面各功能说明         安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.c ...

  4. VC绘制控件如何防止闪烁

    理论上不管什么控件都适用,方法如下: 新建一个MFC类,继承原来的控件类型,对于VC自动生成的类进行如下改动: 首先覆盖 OnEraseBkgnd() 防止擦除时填涂背景: BOOL CXXXCtrl ...

  5. html5 命运之轮生产

    码,如以下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  6. DELPHI下多线程编程的几个思维误区(QDAC)

    有几个网友私下问我一些有关线程的事情.过节写个东西上来大家交流. 思维误区1,自己新建的THREAD是线程,自己的主程序不是线程. 很多人在多线程编程没有把主线程也当作线程.其实主线程也是线程.看起来 ...

  7. css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  8. WPF 遍历 控件

    比较简单的方式是 在设计一个画面时 先添加一个grid 或其他的布局控件 确保要遍历的控件都在这个Grid中时就可以这么写 foreach (UIElement uie in Grid.Childre ...

  9. QSS 盒子模型

    每个 Widget 所在的范围都是一个矩形区域(无规则窗口也是一个矩形,只是有的地方是透明的,看上去不是一个矩形),像是一个盒子一样.QSS 支持盒子模型(Box Model),和 CSS 的盒子模型 ...

  10. [转载]关于Java reference的一篇博文

    不再额外的叨叨了,直接附上原地址: https://community.oracle.com/people/enicholas/blog/2006/05/04/understanding-weak-r ...