rem：移动web开发

  • 默认字体大小是16px

  • 在<html>中设置字体大小

  • 与em的区别：

    • em是在父级设置字体大小受影响

  • 移动端适配

    • 首先获取屏幕的宽度

    • 计算当前屏幕宽度和640的比例

    • 计算出font-size的值

    • 改变html的font-size的值

      <!DOCTYPE html>
      
<html lang="en" style="font-size: 100px;">
      
<head>
      
    <meta charset="UTF-8">
      
    <title>rem</title>
      
    <style>
      
        * {
      
            margin: ;
      
            padding: ;
      
        }
      
        div {
      
            width: .4rem;
      
            height: .4rem;
      
            background-color: pink;
      
            font-size: .14rem;
      
            margin:  auto;
      
        }
      
        p {
      
            width: %;
      
            height: %;
      
            background-color: skyblue;
      
        }
      
    </style>
      
</head>
      
<body>
      
    <div>
      
        <p>这是一个p</p>
      
    </div>
      
</body>
      
</html>

      第一种：

      window.onresize = function(){
      
    var html = document.getElementsByTagName('html')[];
      
    var width = html.offsetWidth;
      
    console.log(width);
      
    html.style.fontSize = (width>=?:width)/* + 'px';
      
};

      第二种：

    •   var html = document.getElementsByTagName('html')[];
      
     if(html){
      
         var w = window.innerWidth;
      
         var fontSize = (w>?:w)/ * ;
      
         html.style.fontSize = fontSize + 'px';
      
     }
      
     window.onload = function(){
      
         window.onresize = function(){
      
             var w = window.innerWidth;
      
             console.log(w);
      
             var fontSize = (w>?:w)/ * ;
      
             html.style.fontSize = fontSize + 'px';
      
         }
      
     }

rem简单实现移动端适配的更多相关文章

  1. 小tips：使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  2. 移动端适配 后篇（rem+vm）

    涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...

  3. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

  4. Rem实现移动端适配

    移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...

  5. 移动端适配-rem（新）

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

  6. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  7. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  8. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  9. 移动端适配方案（rem+flex）

    为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem.   移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...

随机推荐

  1. ASP.NET 页面验证cookie

    using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary ...

  2. Robot Framework（五）使用测试库

    使用测试库 测试库包含那些最低级别的关键字,通常称为 库关键字,实际上与被测系统交互.所有测试用例总是使用某些库中的关键字,通常是通过更高级别的用户关键字.本节介绍如何使用测试库以及如何使用它们提供的 ...

  3. UVA1339 - Ancient Cipher 【字符串+排序】【紫书例题4.1】

    题意:给定两个字符串,你可以替换或者置换,替换是指可以将相同的字母替换为任意一个字母,而置换是指将字母替换为下一个,如A替换B,B替换为C,,,Z替换为A.你需要判断是否可以通过一系列操作使两个字符串 ...

  4. Ubuntu Server下docker实战 02: docker进阶配置

    在上一篇文章里<Ubuntu Server下docker实战 01: 安装docker>,我们已经把docker安装起来了,并运行了一个hello-world 这一篇,我们继续讲进阶配置. ...

  5. 关于 多个git用户或多个git管理工具切换时出现的问题总结

    在这几天遇到了个比较头痛的问题 因为在同时使用多个git工具(gitlab,github.gitee)由于账户的问题和这个仓库指定地址,导致拉代码和推代码不能正常运行 问题解决: 对于多个git直接的 ...

  6. 09.正则表达式re-1.正则表达式

    1.正则表达式概述 正则表达式(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的一个概念. 正则表达式使用单个字符串来描述.匹配一系列匹配某 ...

  7. SpringBoot后台如何实现文件上传下载

    1.单文件上传: @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestPar ...

  8. Method and apparatus for an atomic operation in a parallel computing environment

    A method and apparatus for a atomic operation is described. A method comprises receiving a first pro ...

  9. $GPRMC解析

    http://blog.csdn.net/zccst/article/details/4235068 由于$GPRMC比较重要,所以重点讲解: $GPRMC(Recommended Minimum S ...

  10. 0622 CentOS 6.4下编译安装MySQL 5.6.14

    转自http://www.cnblogs.com/xiongpq/p/3384681.html 概述: CentOS 6.4下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版 ...