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. JDK8新特性：Lambda表达式

    Lambda表达式,案例一:new Thread(() -> System.out.println("thread")); Lambda表达式,案例二:由参数/箭头和主体组成 ...

  2. 一个休假申请页对input标签各种属性的用法案例（手机端）

    <%@ page language="java" import="java.util.*" contentType="text/html; ch ...

  3. scrapy-redis让redis不止使用db0

    废话不多说,直接在  custom_settings 设置即可 代码: class MySpider(RedisSpider): """Spider that reads ...

  4. eas之网络互斥功能示手工控制

    public void doMutexService()    {        IMutexServiceControl mutex = MutexServiceControlFactory.get ...

  5. 多种方法爬取猫眼电影Top100排行榜,保存到csv文件,下载封面图

    参考链接: https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/83663400 https://www.makcyun.top/web_sc ...

  6. Linux学习笔记之1——文件和目录管理（硬连接和软连接）(连结档,相当于快捷方式）

    在这节将要学习linux的连接档,在之前用"ls -l" 查看文件属性的命令时, 其中第二个属性是连接数.那么这个连接数是干什么的?这就要理解inode. 先说一下文件是怎么存储的 ...

  7. 【1】Django概述

    道生一,一生二,二生三,三生万物 无名天地之始,有名万物之母 ——老子 python程序web项目开发,是非常重要的一部分,Python为基础的web项目开发的框架有很多,django无疑是最强大we ...

  8. Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  9. Feign 负载均衡

    一.是什么 Feign 是一个声明式 WebService 客户端.使用 Feign 能让编写 Web Service 客户端更加简单,他的使用方法是定义一个接口,然后在上面添加注解.同时也支持 JA ...

  10. codevs——T1043 方格取数

    http://codevs.cn/problem/1043/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 De ...