<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>rem布局</title>

     <style>

         #div1{width:10rem;height:10rem;background:#f45}

     </style>

 </head>

 <body>

 <div id="div1"></div>

 <script>

     (function(doc, win){

         var docEle = doc.documentElement;

         var evt = "onorichange" ? "onorichange" : "resize";

         var fn = function() {

             var width = docEle.clientWidth;

             width && (docEle.style.fontSize = 20 * (width / 320) + "px");

       }

         fn();

     })(document, window)

 //    width /320 = docEle.style.fontSize/20 ;

 //    目标浏览器的宽度和320的比例 等于 目标浏览器字体大小 与 320宽度浏览器的字体大小的比值

 //

 //    就是定的稿子的宽度为320px宽度,设置其html根字体为font-size:20px;

 //

 //    设置动态比例保证 320/20 = 16 rem 等于屏幕宽度,保证其等比缩放;

 </script>

 </body>

 </html>

rem布局的更多相关文章

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

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

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

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

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

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

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

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  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布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  10. 手机页面rem布局

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

随机推荐

  1. SharedPreference对象及其xml文件

    SharedPreferences对象----->getXXX SharedPreferences.Editor对象---->putXXX

  2. Dependency Walker使用说明

    Dependency Walker使用说明 标签: dllexewindowsvbqq工具 2010-03-29 11:10 25175人阅读 评论(22) 收藏 举报  分类: 基本常识(45)  ...

  3. STM32F103控制两个步进电机按照一定转速比运动

    这个暑假没有回家,在学校准备九月份的电子设计竞赛.今天想给大家分享一下STM32定时器控制两个步进电机按照一定速度比转动的问题. 这次做的05年的电子设计竞赛题目,运动悬挂系统..本实验是控制两个步进 ...

  4. linux分区,文件系统,目录结构概述

    1.Linux中如何表示硬盘,分区 Linux内核读取光驱,硬盘等资源时均通过“设备文件”的形式进行,因此在linux系统中,将硬 盘和分区表示为不同的文件.具体表述形式如下: 硬盘:对于IDE接口的 ...

  5. DB操作用法总结。

    用到了慢慢总结.用到了随时更新. 其实可以看手册了.但是看了完了手册之后,还是记不住. 1. mysql select * from table where id in(1,2,3,3,4) 怎么能显 ...

  6. Java导出excel并下载功能

    我们使用的导出并下载功能是利用一个插件叫POI的插件提供的导出功能,很实用:首先先导入Jar包: Jar包下载地址:http://poi.apache.org/   官方文档地址:http://poi ...

  7. 第三章：挖掘SimpleSection.o

    1.查看.o目标文件用objdump 命令, 参数“-h"就是把ELF文件的各个段的基本信息打印出来.也可以使用-X打印更多的信息. 段的属性,Size是段的长度,FIle off 是段开始 ...

  8. android _scrollview嵌套listview出现高度显示不全解决方案

    只要在工具类里写上这一段代码:/** * scrollview嵌套listview显示不全解决 * @param listView */ public static void setListViewH ...

  9. windows+Ubuntu双系统 windows引导修复

    我的博客:http://blog.csdn.net/muyang_ren 装完windows+Ubuntu麒麟双系统后,发现引导是Ubuntu的. Ubuntu的引导是GRUP windows的引导是 ...

  10. 单调旋转数组的TopK问题

    问题描述:输入一个单调旋转后的数组,求该数组中的第k小的元素. 分析:很多人看到这个题目会有点懵,可能读者不知道什么是旋转数组,我先解释下两个概念, 旋转数组的定义:把一个数组的前几项元素移动到数组的 ...