<!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">

    <script>

        //通过window.screen.width获取屏幕的宽度

        var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px

        document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size

    </script>

    <style>

        /*偷个懒就直接全局初始化了*/

        * {

            padding: 0;

            margin: 0;

        }

        /* 布局需求,上下都间隔*/

        div {

            margin: 0.833333333rem 0;

        }

        /* 去处a标签的下划线*/

        a {

            text-decoration: none;

        }

        .one {

            width: 30rem;

            /*100/720*30*/

            height: 4.166666667rem;

            /*图片宽750,高100*/

            background: url("./img/1.jpg") no-repeat;

            background-size: contain;

        }

        .two {

            width: 30rem;

            /*400/720*30*/

            height: 16.6666667rem;

            /*图片宽750,高400*/

            background: url("./img/2.jpg") no-repeat;

            background-size: contain;

        }

        .three {

            width: 30rem;

            height: 5.875rem;

            /*图片宽750,高141*/

            background: url("./img/3.jpg") no-repeat;

            background-size: contain;

        }

        .four {

            width: 28.33333333rem;

            height: 13.16666667rem;

            /*图片宽750,高316*/

            background: url("./img/4.jpg") no-repeat;

            background-size: contain;

            margin-left: 0.833333333rem;

            position: relative;

        }

        span {

            position: absolute;

            display: block;

            width: 8.33333333rem;

            height: 2rem;

            line-height: 2rem;

            text-align: center;

            background: #fff;

            right: 0.833333333rem;

            bottom: 0.833333333rem;

            font-size: 0.95833333rem;

            color: red;

            cursor: pointer;

        }

        .five {

            width: 28.33333333rem;

            height: 13.16666667rem;

            /*图片宽750,高316*/

            background: url("./img/top4.jpg") no-repeat;

            background-size: contain;

            margin-left: 0.833333333rem;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four">

        <a href=""><span>25元起</span></a>

    </div>

    <div class="five"></div>

</body>

</html>

移动端(阿里rem)布局的更多相关文章

  1. 移动端自适应rem布局

    补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码: <meta name="viewport" con ...

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

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

  3. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  4. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

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

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

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

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

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

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

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

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

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

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

随机推荐

  1. 转：java-Servlet开发

    转:http://www.cnblogs.com/xdp-gacl/p/3760336.html 一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司 ...

  2. 《深入理解Android2》读书笔记（五）

    接上篇<深入理解Android2>读书笔记(四) startActivity Am void run() throws RemoteException { try { printMessa ...

  3. Linux命令之ping

    ping [选项] destination ping命令向网络主机发送ICMP回传请求 详细描述:ping使用ICMP协议强制ECHO_REQUEST(回传请求)数据报从主机或网关获取ICMP协议的E ...

  4. 密码统计分析工具pipal

    密码统计分析工具pipal   pipal是Kali Linux提供的一款密码统计分析工具.该工具可以对一个密码字典的所有密码进行统计分析.它会统计最常用的密码.最常用的基础词语.密码长度占比.构成字 ...

  5. 多协议注入工具t50

    多协议注入工具t50   t50是Kali Linux自带的一款网络数据包注入工具.该工具支持15种协议,不仅涵盖常规协议(ICMP.TCP.UDP),还涵盖基础协议和路由协议(GRE.IPSec.R ...

  6. 安卓架构 视频 Android 插件化架构设计

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha Android 插件化架构设计-Dream老师 自定义SDK =====

  7. [2018湖南省队集训] 6.24 T1 marshland

    题面在这里! 一开始感觉像一个类似二分图的最小割,于是成功跑偏2333333 很容易发现一个关键性质,'L'的两个角落在的偶数格 的行(或者列)的奇偶性一定不同.... 于是我们再把偶数格按照行(或者 ...

  8. 【2-sat】Gym - 101201F - Illumination

    题意:平面上l盏灯,每盏灯可以照亮横向的2*r+1个格子或者纵向的2*r+1个格子,让你确定每盏灯的方向,使得每个格子只被同一行的不超过一盏灯照亮,并且只被同一列的不超过一盏灯照亮.输出是否有解. 显 ...

  9. 【树状数组】Codeforces Round #423 (Div. 1, rated, based on VK Cup Finals) C. DNA Evolution

    题意跟某道我出的等差子序列求最值非常像…… 反正询问的长度只有10种,你就建立10批树状数组,每组的公差是确定的,首项不同. 然后询问的时候只需要枚举询问串的每一位,找找这一位对应哪棵树状数组即可. ...

  10. 【莫比乌斯反演+容斥】BZOJ2301-[HAOI2011]Problem b(成为权限狗的第一题纪念！)

    [题目大意] 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. [思路] “怎么又是你系列……”思路 ...