移动端REM布局模板(阿里高清方案)

移动端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布局模板(阿里高清方案)的更多相关文章

移动端rem布局（阿里）
该方案使用相当简单,把下面这段已压缩过的原生JS(源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) < ...
第132天：移动web端-rem布局（进阶）
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
移动端，多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
关于移动端rem 布局的一些总结
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
移动端rem布局雪碧图解决方案以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

随机推荐

浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
UVA-10779(最大流)
题意: Bob与他的朋友交换贴纸;他的这些朋友只交换自己没有的贴纸;且用的是自己所有的重复贴纸;现在要求Bob最大能得到多少张贴纸; 思路: 把人和物品都进行编号,添加原点s和汇点e,s到每个物品连边 ...
bzoj2875随机数生成器——矩阵快速幂
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2875 矩阵快速幂,把x和c分开求,最后加上即可: 为防止爆long long,要用快速乘. ...
转：Ubuntu12.04编译VLC，在linux上运行
Ubuntu12.04编译vlc2.1.0 1.编译环境 VM8.0.1 # gcc -v Using built-in specs. COLLECT_GCC=gcc COLLECT_LTO_WRAP ...
vue render函数使用jsx语法可以使用v-model语法 vuex实现数据持久化
render函数使用jsx语法: 安装插件 transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化安装插 ...
php字符编码转换中的iconv与mb_convert_encoding用法
iconv ( 'UTF-8' , 'GBK' , $str ); //将$str字符串 utf-8 编码转换成 gbk: 另外,5.4.0 这个版本起,字符非法时候会返回 FALSE,除非在输出字符 ...
jquery 快速入门二
---恢复内容开始--- 操作标签样式操作样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...
E20181001-ts
decorate vt. 装饰; 点缀; 粉刷; 授予(某人)勋章 vi. 装饰; 布置;
ADT版本查看，This Android SDK requires Andr...ate ADT to the latest问题
ADT版本查看 Help->About ADT This Android SDK requires Andr...ate ADT to the latest问题这样的问题很好解决,一个升级AD ...
原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

移动端REM布局模板(阿里高清方案)

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

随机推荐

热门专题