移动端REM布局模板(阿里高清方案)，蛮好的，转自:

http://www.jianshu.com/p/985d26b40199

.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <style>

* {

  box-sizing: border-box;

}

*:before, *:after {

    box-sizing: border-box;

}

*, *:before, *:after {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

  border: 0 none;

  font-size: inherit;

  color: inherit;

  margin: 0;

  padding: 0;

  vertical-align: baseline;

  /* 在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决 */

  max-height: 100000px;

}

h1, h2, h3, h4, h5, h6 {

  font-weight: normal;

}

em, strong {

  font-style: normal;

}

ul, ol, li {

  list-style: none;

}

body {

    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;

    line-height: 1.5;

    color: #333;

    background-color: #f2f2f2;

    font-size: 0.24rem;

}

a {

  text-decoration: none;

}

.box {

  position: relative;

  max-width: 10rem;

  margin: 0 auto;

}

.navRoot {

  position: fixed;

  z-index: 50;

  bottom: 0;

  left:0;

  width: 100%;

  height: 1rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  border-top: 0.01rem solid #ccc;

  background:#f2f2f2;

}

.navLink {

  font-size: 0.42rem;

    -webkit-box-flex: 1;

    -ms-flex: auto;

    flex: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    line-height: 1;

    color: #666;

}

.navLink.active {

  color: #1abc9c

}

.navLinkIco {

  display: block;

  margin-bottom: 0.1rem;

}

.navLinkText {

  display: block;

  line-height: 1;

  font-size: 0.24rem;

}

.img-responsive {

  width: 100%;

}

    </style>

</head>

<body>

  <!-- 阿里高清方案 -->

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);

    flex(100, 1);</script>

<!-- 字形图标 -->

<script src="https://use.fontawesome.com/f47f4563cb.js"></script>

<div class="box">

  <img src="http://temp.im/640x260/444/fff" class="img-responsive">

  <ul style="font-size:0.3rem; padding: 0.2rem">

    <li style="font-size:0.4rem"><a href="http://www.jianshu.com/p/985d26b40199">rem布局（进阶版）的一些说明</a></li>

    <li>1，大家先把这个页面在不同设备模式下浏览下，感受下。</li>

    <li>2，一般来说我们的手机端效果图是640px或750px。对于上图这类需要等屏宽的图片，只需让其宽度设为 100% 即可。</li>

    <li>3， 比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：.myBtn {

   width: 0.55rem;

   height: 0.37rem;

}</li>

    <li>4，该布局方案要求凡是涉及尺寸的，单位都是rem，比如，height width margin paddint top border-radius 等等。你只需要按照效果图上标注的尺寸布局即可。</li>

    <li>5,此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。绝不是每个地方都要用rem，rem只适用于固定尺寸！</li>

    <li>6,特殊注意：字号font-size，边框大小、圆角边框的大小，这些最好还是用px来写。</li>

  </ul>

  <div class="navRoot">

    <a href="#" class="navLink active">

      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>

      <span class="navLinkText">首页</span>

    </a>

    <a href="#" class="navLink">

      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>

      <span class="navLinkText">好店</span>

    </a>

    <a href="#" class="navLink">

      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>

      <span class="navLinkText">简单</span>

    </a>

    <a href="#" class="navLink">

      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>

      <span class="navLinkText">复杂</span>

    </a>

    <a href="#" class="navLink">

      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>

      <span class="navLinkText">异步</span>

    </a>

  </div>

</div>

</body>

</html>

移动端REM布局模板(阿里高清方案)的更多相关文章

  1. 移动端rem布局（阿里）

    该方案使用相当简单,把下面这段已压缩过的 原生JS(源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) < ...

  2. 第132天：移动web端-rem布局（进阶）

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  3. 移动端，多屏幕尺寸高清屏retina屏适配的解决方案

    移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...

  4. 第130天：移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  5. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  6. 移动端rem布局和百分比栅格化布局

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

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

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

  8. 关于移动端rem 布局的一些总结

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

  9. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

随机推荐

  1. Java对象的初始化

    昨天写的代码被殷老师诟病了,因为太「丑陋」. 原来我的代码结构是这样的: public class ColorRocognizer { ..... public static void main(St ...

  2. 并不对劲的bzoj5322:loj2543:p4561:[JXOI2018]排序问题

    题目大意 \(T\)(\(T\leq10^5\))组询问 每次给出\(n,m,l,r\),和\(n\)个数\(a_1,a_2,...,a_n\),要找出\(m\)个可重复的在区间\([l,r]\)的数 ...

  3. BZOJ_2801_[Poi2012]Minimalist Security_dfs树+特判+乱搞

    BZOJ_2801_[Poi2012]Minimalist Security_dfs树+特判+乱搞 Description 给出一个N个顶点.M条边的无向图,边(u,v)有权值w(u,v),顶点i也有 ...

  4. liunx目录/etc下相关配置

    这些都是比较有实用性的系统配置,收藏下,以备不时之需!以下是etc下重要配置文件解释: 1./etc/hosts  #文件格式: IPaddress hostname aliases #文件功能: 提 ...

  5. bzoj 2836 魔法树——树链剖分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2836 树剖裸题.然而WA.RE了好久…… 原来是跳 top 的那个地方! top 不相等的时 ...

  6. 编写 DockerFile

    编写 DockerFile 本节内容简介 在前面的实验中我们多次用到的 Dockerfile,在本实验里我们将通过完成一个实例来学习Dockerfile的编写. 本节中,我们需要依次完成下面几项任务: ...

  7. 1.大量数据导出Excel 之 多重影分身之术

    还未验证过...... 摘自:http://www.cnblogs.com/axing/archive/2012/05/25/Excel-65535.html http://www.cnblogs.c ...

  8. PB调用C# Windows窗体

    以下是PB中的代码:String ls_filenameLong ll_wstyle=1long ll_hwnd,ll_nShowCmdstring ls_lpOperation,ls_lpFile, ...

  9. Ubuntu 安装indicator-sysmonitor

    之前就像安装一个软件用来查看Ubuntu的CPU, 内存, 网速情况, 终于让我碰到了--indicator-sysmonitor 仅需三条命令, 你值得拥有: sudo add-apt-reposi ...

  10. 取消IE增强的安全配置

    在window server里用ie各种信任添加很麻烦 可以通过如下方式取消IE增强设置: 如,在Server2008中,点击快速启动栏里面的服务器管理器图标,进入服务器管理器.选择配置 IE ESC ...