移动端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. Struts2 Action 匹配的几种方式

    下面针对我所遇见的Action的配置方法进行一下总结: 1.基本的匹配方法

  2. Mac开发快速入门

    初次接触mac开发,发现国内相关资料少得可怜,于是写下这篇文章,作为学习记录.Mac应用开发也是使用Objective-C进行开发的,所以从iOS转Mac并不困难,很多东西都一样. 本文以一个登录界面 ...

  3. 洛谷p1007独木桥

    P1007独木桥 题目背景 战争已经进入到紧要时间.你是运输小队长,正在率领运输部队向前线运送物资.运输任务像做题一样的无聊.你希望找些刺激,于是命令你的士兵们到前方的一座独木桥上欣赏风景,而你留在桥 ...

  4. ​MongoDB复制集相关方法使用（五）

    这里我们把复制集中可用的方法都实验一遍,帮助我们更好地来理解复制集.提前说明这些方法的使用是基于Mongodb3.2版本来的,看这篇文章之前需要先看上一篇文章. 介绍一下复制集可用的相关方法 rs.h ...

  5. poj 2069 Super Star —— 模拟退火

    题目:http://poj.org/problem?id=2069 仍是随机地模拟退火,然而却WA了: 看看网上的题解,都是另一种做法——向距离最远的点靠近: 于是也改成那样,竟然真的A了...感觉这 ...

  6. mysql函数之九：MySql取得日期（前一天、某一天）

    取得当天: SELECT curdate(); mysql> SELECT curdate();+------------+| curdate()  |+------------+| 2013- ...

  7. jquery.Datatable.js

    http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html http://blog.csdn.net/mickey_miki/article ...

  8. codevs-1203

    1203 判断浮点数是否相等 题目描述 Description 给出两个浮点数,请你判断这两个浮点数是否相等   输入描述 Input Description 输入仅一行,包含两个浮点数   输出描述 ...

  9. java泛型基础、子类泛型不能转换成父类泛型--未完待续

    参考http://how2j.cn/k/generic/generic-generic/373.html 1.使用泛型的好处:泛型的用法是在容器后面添加<Type>Type可以是类,抽象类 ...

  10. Junit使用注意点

    注意点 1. 使用了@BeforeClass后@Ignore将会失效