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. 理解Python中编码的应用

    完全理解字符编码 与 Python 的渊源前,我们有必要把一些基础概念弄清楚,虽然有些概念我们每天都在接触甚至在使用它,但并不一定真正理解它.比如:字节.字符.字符集.字符码.字符编码. 字节 字节( ...

  2. Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

    1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...

  3. AdminLTE框架基础布局使用

    boxbox-solid:去掉顶部边框线box-headerwith-border:添加头底部边框线 按钮:—— btn btn-default 默认<div class="btn-g ...

  4. java操作Excel的poi 遍历一个工作簿

    遍历一个工作簿 package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi.h ...

  5. [接口管理平台] eoLinker AMS 专业版 V3.5 ：加入数据结构管理、通用函数管理、API 快速测试等近 30 项更新

    eoLinker AMS是集API文档管理.API自动化测试.开发协作三位一体的综合API开发管理平台,是中国最大的在线API管理平台.目前eoLinker AMS已经为来自全球的超过两万家企业托管超 ...

  6. XX-Net的完整教程

    1.下载谷歌浏览器,安装. 2.百度搜索github,github中搜索XX-Net,下载稳定版 3.解压缩下载的文件夹,运行start.vbs文件.如果弹出管理员请求权限请允许,弹出防火墙警告,请允 ...

  7. Codeforces Round #547 (Div. 3) E. Superhero Battle

    E. Superhero Battle A superhero fights with a monster. The battle consists of rounds, each of which ...

  8. 爬虫数据使用MongDB保存时自动过滤重复数据

    本文转载自以下网站: 爬虫断了?一招搞定 MongoDB 重复数据 https://www.makcyun.top/web_scraping_withpython13.html 需要学习的地方: Mo ...

  9. cxGrid主从表删除从表记录的困惑

    cxgrid主从表显示方便直观. varADetailDC: TcxGridDataController;AView: TcxCustomGridTableView; with cxgrdbndtbl ...

  10. 【hihocoder 1297】数论四·扩展欧几里德

    [题目链接]:http://hihocoder.com/problemset/problem/1297 [题意] [题解] 问题可以转化为数学问题 即(s1+v1*t)%m == (s2+v2*t)% ...