<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>移动端--rem案例</title>

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

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <script src="jquery-1.11.3.min.js"></script>

    <script>

        $(function(){

//仿淘宝  设置html基值

            var scale = 1 / devicePixelRatio;

            document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

        });

       /*

         $(function(){

             var html = document.documentElement;

            var windowWidth = html.clientWidth;

            html.style.fontSize = windowWidth / 6.4 + 'px';

            var $winW=$(window).width(),$winH=$(window).height(),$root=($winW/6.4).toFixed(0)+"px";

            $("html").css("fontSize",$root);

        })*/

    </script>

    <style>

        *{margin:0;padding:0;}

        html,body{

            width:100%;

            height:100%;

        }

        .container{

            padding-top:.47rem;

            width:9.38rem;

            margin:0 auto;

        }

        h1{

            font-size:48px;

            color:#fcbe2a;

            text-align:center;

            margin-bottom:1.16rem;

        }

        h2{

            padding-left:.44rem;

            margin-bottom:1.06rem;

            font-size:28px;

            color:#ee620e;

        }

        ul,li{

            list-style:none;

        }

        ul{

            background:#808080;

        }

        li{

            float:left;

            width:2.84rem;

            height:2.84rem;

            line-height:2.84rem;

            margin-right:.42rem;

            text-align:center;

            font-size:16px;

            background:#00ff00;

        }

        li:last-child{

            float:right;

            margin:0;

        }

        .clearfix{

            zoom:1;

        }

        .clearfix:after{

            content:".";

            display:block;

            visibility:hidden;

            clear:both;

            width:0;

            height:0;

        }

    </style>

</head>

<body>

<div class="container">

    <h1>我是大标题</h1>

    <h2>我是二标题</h2>

    <ul class="clearfix">

        <li>模块1</li>

        <li>模块2</li>

        <li>模块3</li>

    </ul>

</div>

</body>

<script>

</script>

</html>

移动端开发 rem 案例的更多相关文章

  1. 移动端开发--rem和像素如何使用！

    刚开始做移动端的开发的时候,大多时候是在使用 像素(PX)来写页面和布局的,但是使用下来,还是有多少不好用! 随之就开始用 rem 来写,rem写的结果是页面放到一些屏幕上,字体过小,如果页面渲染用了 ...

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

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

  3. 移动端开发rem单位

    1.用js计算 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientat ...

  4. 移动端开发注意事项——meta、rem以及弹性盒

    移动端开发注意事项——meta.rem以及弹性盒 随着人们对移动端的依赖程度的增强,前端开发对移动端的需求也越来越强烈.那么,在移动端开发中,有哪些事项是需要注意的呢? meta标签 在常规的pc端开 ...

  5. rem值计算------移动端开发计算方式

    移动端开发: <meta name="viewport" content="width=device-width, initial-scale=1, maximum ...

  6. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  7. web移动端开发技巧与注意事项汇总

    一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...

  8. 移动端开发，几个你可能不知道的CSS单位属性。

    1. rem "em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小:“rem” 中的 “r” 代表 “root”,它表示以根(即“h ...

  9. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

随机推荐

  1. hibernate的中的查询与级联操作

    1.Criteria查询接口适用于组合多个限制条件来搜索一个查询集. 要使用Criteria,需要遵循以下步骤: *创建查询接口: Criteria criteria=session.createCr ...

  2. java 并发(五)---AbstractQueuedSynchronizer（5）

    问题 : ArrayBlockQueue 和 LinkedBlockQueue 的区别 两者的实现又是怎么样的 应用场景 BlockingQueue 概述 blockingQueue 是个接口,从名字 ...

  3. Sequence contains no elements : LINQ error

    1.错误意思: 出现错误的原因是:你要从一个null中取的数据. 2.错误的处理 1,使用FirstOrDefault() 来代替 First() 2.使用SingleOrDefault 来代替 Si ...

  4. git必会必知

    1 前言 git前身是BitKeeper,但是他不是开源软件,不符合当时开源趋势,于是就会有了开源的git,git开发只用了十天时间.目前git是公司开发必不可少的一个工具,用于多人开发的分布式版本控 ...

  5. windows下es安装教程

    es安装 1.es下载地址:https://www.elastic.co/downloads/past-releases 2.使用es需要先安装好jdk,注意es版本和jdk版本的兼容问题,es6.1 ...

  6. mac通过wine运行windows程序(将文件关联到windows程序notepad++)

    windows程序功能强大且已经习惯使用了,用mac总感觉不给力,例如记事本工具Notepad++就非常优秀.下面介绍如何在mac系统下通过wine来安装使用notepadd++程序. 1.安装win ...

  7. Coherence 简介

    Coherence是Oracle为了建立一种高可靠和高扩展集群计算的一个关键部件.   典型的使用Coherence的架构图是: Coherence被放在应用服务器和数据库服务器之间,从而解决通常应用 ...

  8. 通过JTS源码分析Rtree(未完待续)

    前言 R树在数据库等领域做出的功绩是非常显著的.它很好的解决了在高维空间搜索等问题.它把B树的思想很好的扩展到了多维空间,采用了B树分割空间的思想,并在添加.删除操作时采用合并.分解结点的方法,保证树 ...

  9. hdu 1162 Eddy's picture （Kruskal 算法）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 Eddy's picture Time Limit: 2000/1000 MS (Java/Ot ...

  10. linux父子进程问题

    今天遇到一个linux进程启动时指定Max open files不对的问题,导致程序建立socket异常,进而导致fullgc问题,影响正常服务.所以顺带又温习了下linux下的父子进程的特性. 孤儿 ...