<!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. java ee的map

  2. Java生成二维码和解析二维码URL

    二维码依赖jar包,zxing <!-- 二维码依赖 start --><dependency> <groupId>com.google.zxing</gro ...

  3. [Mysql高可用]——双主互备+keepalived

    实验架构图    实验环境 主机名 操作系统 Mysql版本 keepalived版本 主机IP VIP lyj1(Master/Slave) Red Hat release 6.5 Mysql5.6 ...

  4. AngularJS的日期格式化去掉秒

    <td>订单创建时间:{{item.odatetime.substring(0,16)}}</td>

  5. tomcat绑定域名绑定端口及更换ROOT目录

    一.更换ROOT目录 tomcat默认网站目录为 webapps/ROOT ,那么我们如何改为自己的网站目录呢? 1.打开并编辑tomcat目录下的 conf/server.xml 大约在148行的位 ...

  6. 移除TFS服务器关系

    移除TFS服务器关系:1.将项目和从以前的TFS服务器断开.2.退出VS.3.找到C:\Documents and Settings\Administrator\Local Settings\Appl ...

  7. so模块加载后数据问题

    lualib-src里面都没有存数据的地方 那么bjm里面的这块数据防全局,再多个虚拟机里require后数据会全局共享吗

  8. mysql的with rollup

    无意间发现了mysql的with rollup函数(用在group by 函数后面) 测试 1. SELECT NAME,DATE,score FROM stu 结果是 2. SELECT NAME, ...

  9. Ascii码 unicode码 utf-8编码 gbk编码的区别

    ASCII码: 只包含英文,数字,特殊符号的编码,一个字符用8位(bit)1字节(byte)表示 Unicode码: 又称万国码,包含全世界所有的文字,符号,一个字符用32位(bit)4字节(byte ...

  10. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...