<!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. jenkins配置权限不对导致无法登陆或者空白页面解决办法

    找到.jenkins/config.xml文件:替换为:1.<authorizationStrategy class="hudson.security.AuthorizationStr ...

  2. 配置nginx服务器全局命令

    service nginx start|stop|reload 报错:Failed to reload nginx.service: Unit not found.[解决方案] 在执行service ...

  3. [转]Using $select, $expand, and $value in ASP.NET Web API 2 OData

    本文转自:https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/using- ...

  4. [转]Consuming a OData Service in a Client Application (WCF Data Services)

    本文转自:https://msdn.microsoft.com/zh-tw/library/dd728282(v=vs.103).aspx WCF Data Services 5.0   其他版本   ...

  5. jquery ui dialog弹出窗 清空缓存Cache或强制刷新

    我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据.发现购物车被缓存,一直看到是旧数据.为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面.有没有一种方法来自动刷新加载 ...

  6. Java - 多线程中的不变性问题

    这篇记录一下保证并发安全性的策略之——不变性. (注意:是Immutable,不是Invariant!) 将一连串行为组织为一个原子操作以保证不变性条件,或者使用同步机制保证可见性,以防止读到失效数据 ...

  7. Gradle 学习（一）

    引入插件 apply plugin: 'java' apply plugin: 'war' apply plugin: 'jetty' 如果希望使用jar来启动项目, 可以这样修改项目和插件属性. a ...

  8. mysql存储过程优化

    示例 WHILE s <> 1 DO select xxx; insert into xxx; END WHILE; 执行耗时27秒 优化点1: 添加事物 START TRANSACTIO ...

  9. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  10. hiho一下 第一周 最长回文子串

    时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. 这 ...