dome如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>移动h5自适应布局</title>
<style>
　　/*320px布局*/
　　html{font-size: 100px;}
　　body{font-size: 0.14rem;/*实际相当于14px*/}
　　body{
　　　　padding:0;
　　　　margin:0;
　　}
　　.div2{
　　　　font-size:0.14rem;
　　}
　　.div3{
　　　　width:3rem;
　　　　height:3rem;
　　　　border:1px solid #000;
　　　　box-sizing:border-box;
　　}
　　.div4{
　　　　margin-top:0.1rem;
　　　　width:2rem;
　　　　height:2rem;
　　　　border:1px solid #000;
　　　　box-sizing:border-box;
　　}
　　.img1{
　　　　width:3.2rem;
　　}
</style>
</head>
<body>
　　<div class="div2">动态更改html元素大小</div>
　　<div class="div3"></div>
　　<div class="div4"></div>
　　<img class="img1" src="http://www.baidu.com/img/bdlogo.png" alt="" />
</body>
<script>
　　// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
(function (doc, win) {
　　　　// 分辨率Resolution适配
　　　　var docEl = doc.documentElement,
　　　　resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
　　　　recalc = function () {
　　　　　　var clientWidth = docEl.clientWidth;
　　　　　　if (!clientWidth) return;
　　　　　　docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
　　　　};

　　　　// Abort if browser does not support addEventListener
　　　　if (!doc.addEventListener) return;
　　　　win.addEventListener(resizeEvt, recalc, false);
　　　　doc.addEventListener('DOMContentLoaded', recalc, false);
　　　　// 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
　　　　(function(){
　　　　　　return;
　　　　　　var dpr = scale =1;
　　　　　　var isIPhone = win.navigator.appVersion.match(/iphone/gi);
　　　　　　var devicePixelRatio = win.devicePixelRatio;
　　　　　　if (isIPhone) {
　　　　　　　　// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
　　　　　　if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
　　　　　　　　dpr = 3;
　　　　　　} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
　　　　　　　　dpr = 2;
　　　　　　} else {
　　　　　　　　dpr = 1;
　　　　　　}
　　　　} else {
　　　　// 其他设备下，仍旧使用1倍的方案
　　　　　　dpr = 1;
　　　　}
　　　　　　scale = 1 / dpr;

//
　　　　var metaEl = "";
　　　　metaEl = doc.createElement('meta');
　　　　metaEl.setAttribute('name', 'viewport');
　　　　metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
　　　　if (docEl.firstElementChild) {
　　　　　　docEl.firstElementChild.appendChild(metaEl);
　　　　} else {
　　　　　　var wrap = doc.createElement('div');
　　　　　　wrap.appendChild(metaEl);
　　　　　　doc.write(wrap.innerHTML);
　　　　}
　　})();
})(document, window);
</script>
</html>

使用说明：　拿到320的设计图按照标注尺寸大小除以100，即可得到rem值，如果是640的设计图则除以200，即可得到rem值；

　　　　　　docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';

　　　　　　你可以把上面的dome拷下来，完了自己改动改动 上述代码中的 320 和100 两个值试试，

　　　　　　前者是换算比，后者是设计图尺寸；

　　　　　　　要用的话就把这个js拷下来，作为一个单独的js插件引入到你的html中，按着比例换算即可

css 里面一些好的东西：

　　　　　　字体不换行 -  white-space:nowrap;

　　　　　　超出部分以省略号显示 -  text-overflow:ellipsis; 配合 overflow: hidden;使用

　　　　　　字体和图片在一行的时候字体和图片居中对接   -   vertical-align:middle;

原文献：http://www.cnblogs.com/samwu/p/4285748.html

移动端rem适配布局的更多相关文章

  1. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  2. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  3. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  5. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  6. 移动web开发之rem适配布局

    移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...

  7. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

  8. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  9. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

随机推荐

  1. python base64加解密

    加密字符串 encodestr = base64.b64encode("chenglee1234".encode(encoding='utf-8')) 解密字符串 decodest ...

  2. 维护keepalived与mysql漂移脚本

    环境拓扑 chengAlived #!/bin/bash function checkModelone(){ echo "重新进行获取" wget 192.168.158.147: ...

  3. [c/c++] programming之路（9）、运算优先级

    一.运算优先级 二.条件运算符(表达式1?表达式2:表达式3) 当式1正确时,取式2的值:否则,取式3的值 三.格式字符 #include<stdio.h> #include<std ...

  4. UML状态机图【图3】--☆

    UML状态机图 基本概述    状态机图描述的是围绕某一事物状态变化的图.它也是三大流程分析利器之一.它和活动图的区别在于,活动图是描述事物发生的流程,是多个角色参与的,而状态机描述的是事物的状态变化 ...

  5. Java 使用命令对堆线程分析

    一.dump基本概念 在故障定位(尤其是out of memory)和性能分析的时候,经常会用到一些文件来帮助我们排除代码问题.这些文件记录了JVM运行期间的内存占用.线程执行等情况,这就是我们常说的 ...

  6. Elasticsearch 异常处理

    cluster_block_exception https://stackoverflow.com/questions/50609417/elasticsearch-error-cluster-blo ...

  7. Docker 开发概述

    This page lists resources for application developers using Docker. Develop new apps on Docker If you ...

  8. Python 网页解析器

    Python 有几种网页解析器? 1. 正则表达式 2.html.parser (Python自动) 3.BeautifulSoup(第三方)(功能比较强大) 是一个HTML/XML的解析器 4.lx ...

  9. Qt中中文字符 一劳永逸的解决方法

    QT中中文字符问题,有没有一劳永逸的解决方法? 目前遇到有以下问题 1.字符串中有中文时,编译提示"常量中含有换行符" 2.在控制台窗口输出中文时无法正常显示,中文全部显示为? 目 ...

  10. DataTableHelper

    public class DataTableHelper { /// <summary> /// 给DataTable增加一个自增列 /// 如果DataTable 存在 identity ...