<!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. Codeforces 949E Binary Cards

    Description 给出一个长度为 \(n\) 的数组,求使得用最少数量的 \(2^k\) 或 \(-2^k\) 的数,使得数组中的每一个元素都可以被你选出的 \(2\) 的次幂表示 题面 Sol ...

  2. MySQL重置root密码提示"Unknown column ‘password"的问题?

    晚上打开MAC,发现root帐户突然不能正常登陆MySQL,于是打算重置密码,看了几篇文章,竟然重置不成功,总是得到Unknown column 'password'的错误,看了user的表结构也确实 ...

  3. 2017年12月13日 LinQ用法基本的增删改查

    LinQ是什么? LinQ是语言集成的查询,是用于C#跟Vb的扩展语言 LinQ的用法 新建一个App_Code文件夹,在文件夹下添加一个数据LinQ to SQL类,可以直接直接点击服务器管理器然后 ...

  4. openlayers 各种图层，持续更新

    /*高德地图*/ var vectorLayerLine = new ol.layer.Tile({ source: new ol.source.XYZ({ urls: [ "http:// ...

  5. No mapping found for HTTP request with URI异常的原因，<mvc:default-servlet-handler/>的作用

    一.最近做的一个项目有很多静态资源文件,按照平时的配置springmvc进行配置发现访问不到静态文件,并且在我配置好controller去访问结果还是404 No mapping found for ...

  6. 流畅的python和cookbook学习笔记（三）

    1.双向队列 collections.deque 类(双向队列)是一个线程安全.可以快速从两端添加或者删除元素的数据类型. rotate和popleft操作,rorate可以把前后元素换位.pople ...

  7. [错误记录_C] 还未给指针变量正确赋值的情况下，就使用它的值

    错误的代码: 错误的结果:  错误原因分析: 在使用(1) 将pB,pC的值赋给pA的lchild和rchild时: 还未给指针变量pB和pC赋值,现在pB和pC中存的是个垃圾值 Note: (2)- ...

  8. Windows下etc文件夹

    etc etcetera[ɛtsɛtərə]缩写 等等的意思 放置一些其他文件

  9. 关于纯css写三角形在firefox下的锯齿问题

    相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来: .triangle_border_up{ width:; height:; bo ...

  10. KMP算法的一个简单实现

    今天学习KMP算法,参考网上内容,实现算法,摘录网页内容并记录自己的实现如下: 原文出处: http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93M ...