<!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. Dictionary<string, object>不区分大小写

    Dictionary<string, object> dic = new Dictionary<string, object>(StringComparer.OrdinalIg ...

  2. IdentityServer4授权模式应用场景

    OpenID 和 OAuth 的区别 IdentityServer4,NET Core下的安全框架 客户端模式(Client Credentials) 密码模式(resource owner pass ...

  3. web_02Java ee实现验证码，网站访问次数功能

    Web Web_02版本: 实现功能 1,验证码 2,网站访问次数统计 设计内容 1,servlet 2,jsp 3,js *重点 1,验证码相关: 1,Servlrt类实现验证码的生成 CheckC ...

  4. Delphi下OpenGL2d绘图(01)-初始化

    一.前言: Delphi默认支持OpenGl,可以uses OpenGL单元进行引用,便可以使用OpenGL的函数.OpenGl是跨平台的,而且Windows很早就支持并集成在系统中,存在于syste ...

  5. JavaScript对象中的constructor属性

    constructor属性始终指向创建当前对象的构造函数. 比如下面的例子: // 等价于 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, ...

  6. SpringCloud实战之初级入门（二）— 服务注册与服务调用

    目录 1.环境介绍 2.服务提供 2.1 创建工程 2.2 修改配置文件 2.3 修改启动文件 2.5 亲测注意事项 3.服务调用 3.1 创建工程 3.2 修改配置文件 3.3 修改启动文件 3.4 ...

  7. SpringMVC 工作流程

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/baidu_36697353/article/details/64444147 SpringMVC 工 ...

  8. javaweb之EL自定义函数

    1.什么是EL自定义函数 EL自定义函数是在EL表达式中调用的某个java类的静态方法,这个静态方法需在web应用程序中进行配置才可以被EL表达式调用.EL自定义函数可以扩展EL表达式的功能,让EL表 ...

  9. 固态硬盘SSD与闪存（Flash Memory）

    转自:http://qiaodahai.com/solid-state-drives-ssd-and-flash-memory.html 固态硬盘SSD(Solid State Drive)泛指使用N ...

  10. IOC和DI到底是什么？

     在学习Spring框架的时候,我们总是能见到IOC这个单词,也时常听到DI这个词,那么他们分别是什么意思呢?接下来就讲讲个人对于这两个概念的理解  一.IOC和DI概念 IOC(控制反转):全称为: ...