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

首先，给页面的html定义一个100px的
html{
font-size:100px;}/*设定基础rem*/

然后就是这一段js运算了，根据页面的大小来控制基础rem的值；

new function (){
   var _self = this;
   _self.width =
640;//设置默认最大宽度
   _self.fontSize = 100;//默认字体大小
   _self.widthProportion =
function(){var p =
(document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.width;return
p>1?1:p<0.5?0.5:p;};
   _self.changePage = function(){
      
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px
!important");
   }
   _self.changePage();
  
window.addEventListener("resize",function(){_self.changePage();},false);
};

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta charset="utf-8">

<title>rem基础布局</title>

<script type="text/javascript">

new function (){

   var _self = this;

   _self.width = 640;//设置默认最大宽度

   _self.fontSize = 100;//默认字体大小

   _self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};

   _self.changePage = function(){

       document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");

   }

   _self.changePage();

   window.addEventListener("resize",function(){_self.changePage();},false);

};

</script>

<style type="text/css">

/*=== base style===*/

*{margin: 0px; padding: 0px;}

ul{list-style: none;}

.wrap{min-width: 320px; max-width: 640px; width: 100%; margin: 0px auto;; background: #2a6ace; font-family:"微软雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; font-size: 12px;}/*适用于手机端：字体大小用em，1em=16px；为默认字体大小;最大宽度640*/

.pro{width:6.2rem; margin: 0px auto; padding-top: 20px; overflow: hidden;}

.clearfix:after {content:"";height:0;display:block;clear:both;}

.clearfix {zoom:1;}

.pro ul{width:6.4rem;}

.pro li{width: 3rem; height: 3.6rem; float: left; margin: 0 0.2rem 0.2rem 0;}

.pro li .box{width: 3rem; height: 3rem; background: #ccc;}

.pro li p{font-size: 0.24rem; line-height: 0.6rem; text-align: center;}

</style>

</head>

<body>

<div class="wrap">

   <div class="pro">

      <ul class="clearfix">

         <li> <div class="box"></div> <p>区块文案</p> </li>

         <li> <div class="box"></div> <p>区块文案</p> </li>

         <li> <div class="box"></div> <p>区块文案</p> </li>

         <li> <div class="box"></div> <p>区块文案</p> </li>

         <li> <div class="box"></div> <p>区块文案</p> </li>

      </ul>

   </div>

</div>

</body>

</html>
// 监听浏览器,针对不同分辨率计算font-size

// 然后根据设计稿比如尺寸是640尺寸 rem = 设计稿的字体大小 / 100 ; 16px —> 0.16rem

(function (doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            if (clientWidth<=320){

                docEl.style.fontSize = '50px';

            }

            // else if(clientWidth>=640){

            //     docEl.style.fontSize = '100px';

            // }

            else{

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

            }

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

手机页面rem布局的更多相关文章

  1. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  2. 移动手机专题rem布局实践+主要代码

    HTML开头部分 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" / ...

  3. 在页面rem布局中用到的js代码

    在你的页面加入以下代码,就初步搞定了 function fontSize() { var view_width = document.getElementsByTagName('html')[0].g ...

  4. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  5. 手机端页面自适应：rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  6. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  7. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  8. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  9. 手机端页面自适应解决方案—rem布局（该方案目前已过时）

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

随机推荐

  1. EF Code First学习笔记 初识Code First

    Code First是Entity Framework提供的一种新的编程模型.通过Code First我们可以在还没有建立数据库的情况下就开始编码,然后通过代码来生成数据库. 下面通过一个简单的示例来 ...

  2. order by优化--Order By实现原理分析和Filesort优化

    在MySQL中的ORDER BY有两种排序实现方式: 1.利用有序索引获取有序数据 2.文件排序 在使用explain分析查询的时候,利用有序索引获取有序数据显示Using index.而文件排序显示 ...

  3. put a ContextMenu into the header of a TabPage z

    publicclassMyTabControl:TabControl { protected override void OnMouseUp(MouseEventArgs e){ if(e.Butto ...

  4. opencv linux

    This link which you also mentioned describes the necessary steps to compile OpenCV on your machine. ...

  5. 配置OpenGL及第一个实例

    Windows环境下安装GLUT的步骤:1.将下载的压缩包解开,将得到5个文件2.在“我的电脑”中搜索“gl.h”,并找到其所在文件夹(如果是VS,则应该是其安装目录下面的“VC\PlatformSD ...

  6. C/C++：拷贝构造函数

    拷贝构造函数是一种特殊的构造函数,因为它也是用来构造对象的.它具有构造函数的所有特性.拷贝构造函数的作用是用一个已经存在的对象去初始化另一个对象,这两个对象的类类型应该是一样的.定义拷贝构造函数的形式 ...

  7. DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成

    博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...

  8. Vijos1404 遭遇战 最短路,dijkstra,堆

    P1404遭遇战 标签:[显示标签]     背景 你知道吗,SQ Class的人都很喜欢打CS.(不知道CS是什么的人不用参加这次比赛). 描述 今天,他们在打一张叫DUSTII的地图,万恶的恐怖分 ...

  9. centos7 rabbitmq系统部署

    CentOS7 1.安装系统 基础设施服务器:Java平台.Linux远程管理.开发工具 2.打开网络连接: (1)cd  /etc/sysconfig/network-scripts/  #进入网络 ...

  10. android NDK 实用学习（二）-java端对象成员赋值和获取对象成员值

    1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值  env->SetBooleanF ...